Forms
Forms play a big part in YourTradebase's UX. When you're creating an invoice or adding materials to your list, you're essentially interacting with a very large form. So, we've designed out form components to be as clear and readable as possible.
We use labels to identify the purpose of form inputs and we add placeholder text into the field itself if and when it's helpful to do so.
Text-based inputs
<label class="frm__label" for="input-one"> This is a label</label><input type="text" class="frm__input" placeholder="This is placeholder text" id="input-one" />
<input type="text" class="frm__input frm__input--med" id="input-two" />
<input type="text" class="frm__input frm__input--short" id="input-three" />
<input type="text" class="frm__input frm__input--tiny" id="input-threeb" />
<input type="text" class="frm__input frm__input--short frm__input--inline" id="input-four" />
<input type="text" disabled placeholder="This is disabled" class="frm__input" id="input-five" />
Here's a .frm__input-primer thingy. Before an input field; information to frame the task a bit… stuff with personality.
Here's a .frm__input-helper thingy. After an input field; more functional stuff.
Textareas
<textarea class="frm__input" id="input-seven">
<textarea class="frm__input textarea--single" id="input-six" />
Dropdowns & selectors
Radios & checkboxes
Modified inputs
<%= render Forms::PercentFieldComponent.new(name: "percentage", label: "Percentage selecting thingy") %>
Searching
Bulk select
Saving
Saved
Saved