Input types
There's a wide variety of input types available.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="ox-form__group">
<label for="text-field" class="ox-form__label">Textfield label</label>
<input type="text" id="text-field" class="ox-form__field"/>
</div>
<div class="ox-form__group">
<label for="number-field" class="ox-form__label">Number field label</label>
<input type="number" id="number-field" class="ox-form__field"/>
</div>
<div class="ox-form__group">
<label for="date-field" class="ox-form__label">Date field label</label>
<input type="date" id="date-field" class="ox-form__field"/>
</div>
<div class="ox-form__group">
<label for="machine-types" class="ox-form__label">Autocomplete field</label>
<input type="text" id="machine-types" class="ox-form__field" list="machine-list"/>
<datalist id="machine-list">
...
</datalist>
</div>
<div class="ox-form__group">
<label for="textarea" class="ox-form__label">Textarea label</label>
<textarea id="textarea" class="ox-form__field"></textarea>
</div>
Units
Units can be added to al input types available. The examples below use a number field.
Usability-wise, it's prefered to use labels for the ox-form__input-group__unit elements, in combination with the for attribute so the input is automatically focussed. For extra information on how to keep your form accessible when using multiple labels for one single field, check out the following page at w3.org
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="ox-form__group">
<label for="max-price" id="max-price-label" class="ox-form__label">Max. price</label>
<div class="ox-form__input-group ox-form__input-group--prepend">
<input type="number" id="max-price" class="ox-form__field" aria-labelledby="max-price-label max-price max-price-unit"/>
<label for="max-price" id="max-price-unit" class="ox-form__input-group__unit" aria-label="in Euro">€</label>
</div>
</div>
<div class="ox-form__group">
<label for="min-height" id="machine-height-label" class="ox-form__label">Min. machine height</label>
<div class="ox-form__input-group ox-form__input-group--append">
<input type="number" id="min-height" class="ox-form__field" aria-labelledby="machine-height-label min-height machine-height-unit"/>
<label for="min-height" id="machine-height-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
</div>
<div class="ox-form__group">
<label for="machine-height" id="needed-machine-height-label" class="ox-form__label">Needed machine height</label>
<div class="ox-form__input-group ox-form__input-group--prepend ox-form__input-group--append">
<input type="number" id="machine-height" class="ox-form__field" aria-labelledby="min-needed-machine-height needed-machine-height-label machine-height needed-machine-height-unit"/>
<label for="machine-height" id="min-needed-machine-height" class="ox-form__input-group__unit" aria-label="minimum">min.</label>
<label for="machine-height" id="needed-machine-height-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
</div>
Icons
Icons can be added to al input types available. This could be used to specify the data expected in the field, such as with a login form. Note that the icon inside the input-group does not replace the label, it's just an extra visual support.
Since ox-form__input-group__icon is only an extra visual hint but has no extra value usability-wise, adding role="presentation" is advised. It's also prefered to use a label, in combination with the for attribute so the input is automatically focussed.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="ox-form__group">
<label for="username" class="ox-form__label">Username</label>
<div class="ox-form__input-group ox-form__input-group--append">
<input type="text" id="username" class="ox-form__field"/>
<label for="username" class="ox-form__input-group__icon" role="presentation"><span class="ox-icon ox-icon--user"></span></label>
</div>
</div>
<div class="ox-form__group">
<label for="password" class="ox-form__label">Password</label>
<div class="ox-form__input-group ox-form__input-group--append">
<input type="password" id="password" class="ox-form__field"/>
<label for="password" class="ox-form__input-group__icon" role="presentation"><span class="ox-icon ox-icon--lock"></span></label>
</div>
</div>
Small fields
If the available space is limited, you can add the class ox-form__field--small to the concerning field. The same applies for input groups, but here you'll have to add the modifier ox-form__input-group--small to the input-group and not to the input or units.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ox-form__group">
<label for="amount-small" class="ox-form__label">Amount</label>
<input type="number" id="amount-small" class="ox-form__field ox-form__field--small"/>
</div>
<div class="ox-form__group">
<label for="machine-height-small" id="machine-height-small-label" class="ox-form__label">Needed machine height</label>
<div class="ox-form__input-group ox-form__input-group--small ox-form__input-group--prepend ox-form__input-group--append">
<input type="number" id="machine-height-small" class="ox-form__field" aria-labelledby="min.machine-height-small machine-height-small-label machine-height-small machine-height-small-unit"/>
<label for="machine-height-small" id="min.machine-height-small" class="ox-form__input-group__unit" aria-label="minimum">min.</label>
<label for="machine-height-small" id="machine-height-small-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
</div>
Placeholder
The placeholder attribute helps to describe what the expected value or format is for that input field. This hint or short description is displayed inside the field and disappears once you enter data.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="ox-form__group">
<label for="contact-person-placeholder" class="ox-form__label">Contact person</label>
<input type="text" id="contact-person-placeholder" class="ox-form__field" placeholder="First and last name of the contact person"/>
</div>
<div class="ox-form__group">
<label for="Machine-height-placeholder" class="ox-form__label">Min. machine height</label>
<input type="number" id="Machine-height-placeholder" class="ox-form__field" placeholder="Enter a numeric value"/>
</div>
<div class="ox-form__group">
<label for="description-placeholder" class="ox-form__label">Description</label>
<textarea id="description-placeholder" class="ox-form__field" placeholder="Enter a thorough description"></textarea>
</div>
Validation
To visually mark a field as invalid, add the class ox-is-invalid to the form group. This will make the border red and add an icon to the input. Don't forget to add clear feedback about the error per field in a span with the class ox-form__feedback.
For accessibility reasons, it's important to add aria-invalid="true" to the input, and to tell the field where the error message is through the aria-describedBy attribute.
Example
Please fill in this field
Please fill in this field
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="ox-form__group ox-is-invalid">
<label for="contact-person-validation" class="ox-form__label">Contact person</label>
<input type="text" id="contact-person-validation" class="ox-form__field" aria-invalid="true" aria-describedBy="contact-person-validation-message"/>
<span class="ox-form__feedback" id="contact-person-validation-message">Please fill in this field</span>
</div>
<div class="ox-form__group ox-is-invalid">
<label for="min-machine-height-validation" id="min-machine-height-validation-label" class="ox-form__label">Min. needed machine height</label>
<div class="ox-form__input-group ox-form__input-group--append">
<input type="number" id="min-machine-height-validation" class="ox-form__field" aria-labelledby="min-machine-height-validation-label min-machine-height-validation min-machine-height-validation-unit" aria-invalid="true" aria-describedBy="min-machine-height-validation-message">
<label for="min-machine-height-validation" id="min-machine-height-validation-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
<label for="min-machine-height-validation" id="min-machine-height-validation-message" class="ox-form__feedback">Please fill in this field</label>
</div>
<div class="ox-form__group ox-is-invalid">
<label for="price-validation" id="price-validation-label" class="ox-form__label">Price</label>
<div class="ox-form__input-group ox-form__input-group--prepend">
<input type="number" id="price-validation" class="ox-form__field" aria-labelledby="price-validation-label price-validation price-validation-unit" aria-invalid="true" aria-describedBy="price-validation-message"/>
<label for="price-validation" id="price-validation-unit" class="ox-form__input-group__unit" aria-label="in euro">€</label>
</div>
<span id="price-validation-message" class="ox-form__feedback">Please fill in this field</span>
</div>
<div class="ox-form__group ox-is-invalid">
<label for="machine-height-validation" id="machine-height-validation-label" class="ox-form__label">Needed machine height</label>
<div class="ox-form__input-group ox-form__input-group--prepend ox-form__input-group--append">
<input type="number" id="machine-height-validation" class="ox-form__field" aria-labelledby="machine-height-validation-min machine-height-validation-label machine-height-validation machine-height-validation-unit" aria-invalid="true" aria-describedBy="machine-height-validation-message"/>
<label for="machine-height-validation" id="machine-height-validation-min" class="ox-form__input-group__unit" aria-label="minimum">min.</label>
<label for="machine-height-validation" id="machine-height-validation-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
<span id="machine-height-validation-message" class="ox-form__feedback">Please fill in this field</span>
</div>
<div class="ox-form__group ox-is-invalid">
<label for="description-validation" class="ox-form__label">Description</label>
<textarea id="description-validation" class="ox-form__field" aria-invalid="true" aria-describedBy="description-validation-message"></textarea>
<span id="description-validation-message" class="ox-form__feedback">Please fill in this field</span>
</div>
States
Disabled
When an input element is disabled it's blocked and the user won't be able to enter a value or click in the field. This can be set to keep a user from using the element until an other condition has been met (e.g. checking a checkbox). When submitting a form, disabled fields will be ignored.
Example
1
2
3
4
5
6
7
8
9
<div class="ox-form__group">
<label for="contact-person-disabled" class="ox-form__label">Contact person</label>
<input type="text" class="ox-form__field" id="contact-person-disabled" disabled/>
</div>
<div class="ox-form__group">
<label for="description-disabled" class="ox-form__label">Description</label>
<textarea id="description-disabled" class="ox-form__field" disabled></textarea>
</div>
Read-only
Just like a disabled input, the user isn't able to use or edit this field. The difference lies in other functionalities such as tabbing, highlighting or copying the text from it. An other major difference is that a read-only field won't be ignored when the form is submitted.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="ox-form__group">
<label for="contact-person-readonly" class="ox-form__label">Contact person</label>
<input type="text" value="John Doe" id="contact-person-readonly" class="ox-form__field" readonly/>
</div>
<div class="ox-form__group">
<label for="extra-info-readonly" class="ox-form__label">Extra information</label>
<textarea id="extra-info-readonly" class="ox-form__field" readonly>When delivering the machines in the morning, the driver will need to register at the reception first. This will take approximately 30 minutes.</textarea>
</div>
<div class="ox-form__group">
<label for="max-price-readonly" id="max-price-readonly-label" class="ox-form__label">Max. price</label>
<div class="ox-form__input-group ox-form__input-group--prepend">
<input type="number" value="1982.50" id="max-price-readonly" class="ox-form__field" aria-labelledby="max-price-readonly-label max-price-readonly max-price-readonly-unit" readonly/>
<label for="max-price-readonly" id="max-price-readonly-unit" class="ox-form__input-group__unit" aria-label="in Euro">€</label>
</div>
</div>
<div class="ox-form__group">
<label for="min-height-readonly" id="min-height-readonly-label" class="ox-form__label">Min. machine height</label>
<div class="ox-form__input-group ox-form__input-group--append">
<input type="number" value="10" id="min-height-readonly" class="ox-form__field" aria-labelledby="min-height-readonly-label min-height-readonly min-height-readonly-unit" readonly/>
<label for="min-height-readonly" id="min-height-readonly-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
</div>
<div class="ox-form__group">
<label for="machine-height-readonly" id="machine-height-readonly-label" class="ox-form__label">Needed machine height</label>
<div class="ox-form__input-group ox-form__input-group--prepend ox-form__input-group--append">
<input type="number" value="13" id="machine-height-readonly" class="ox-form__field" aria-labelledby="min-machine-height-readonly machine-height-readonly-label machine-height-readonly machine-height-readonly-unit" readonly/>
<label for="machine-height-readonly" id="min-machine-height-readonly" class="ox-form__input-group__unit" aria-label="minimum">min.</label>
<label for="machine-height-readonly" id="machine-height-readonly-unit" class="ox-form__input-group__unit" aria-label="in meters">m</label>
</div>
</div>