Selection types

By default there are a few selection controls:

  • Radio buttons: allow users to select a single option from a limited set of items.
  • Checkbox: allow users to select none, one or more options from a limited set.
  • Select: allows users to select a single option from a large set of items.
  • Range: allows users to select from a range of values.
Example

Are you happy?

Choose a brand

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

<div class="ox-form__group">
	<p class="ox-form__label" id="happiness">Are you happy?</p>
	<div class="ox-form__radio">
		<input type="radio" name="happiness" id="radiobutton-happy" class="ox-form__radio__input" value="yes" aria-describedby="happiness" />
		<label for="radiobutton-happy" class="ox-form__radio__label">Yes</label>
	</div>
	<div class="ox-form__radio">
		<input type="radio" name="happiness" id="radiobutton-notHappy" class="ox-form__radio__input" value="no" aria-describedby="happiness" />
		<label for="radiobutton-notHappy" class="ox-form__radio__label">No</label>
	</div>
</div>

<div class="ox-form__group">
	<p class="ox-form__label" id="brandpicker">Choose a brand</p>
	<div class="ox-form__checkbox">
		<input type="checkbox" id="checkbox-levis" class="ox-form__checkbox__input" value="Levis" aria-describedby="brandpicker" />
		<label for="checkbox-levis" class="ox-form__checkbox__label">Levis</label>
	</div>
	<div class="ox-form__checkbox">
		<input type="checkbox" id="checkbox-lee" class="ox-form__checkbox__input" value="Lee" checked="checked" aria-describedby="brandpicker" />
		<label for="checkbox-lee" class="ox-form__checkbox__label">Lee</label>
	</div>
</div>

<div class="ox-form__group">
	<label for="selection" class="ox-form__label">Choose an option</label>
	<select id="selection" class="ox-form__field">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
	</select>
</div>

<div class="ox-form__group">
	<label for="range" class="ox-form__label">Slide to value</label>
	<input type="range" id="range" class="ox-form__range">
</div>

Small select

If there isn't much space available you can add the class ox-form__field--small to the select.

Example 
1
2
3
4
5
6
7
8
9

<div class="ox-form__group">
	<label for="selection" class="ox-form__label">Choose an option</label>
	<select id="selection" class="ox-form__field ox-form__field--small">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
	</select>
</div>

The pill switch is a type of checkbox that can be used for an on / off or a yes / no value. Only use this when there is no default or there is no required selection necessary, else the default radiobuttons and checkboxes are prefered.

Example 
1
2
3
4

<div class="ox-form__group">
	<label for="pill-1" class="ox-form__label">Label</label>
	<input type="checkbox" id="pill-1" value="yes" class="ox-form__pillswitch"/>
</div>

The toggle is a type of radiobutton group that is used when the selection of an option results in showing another part of the form (e.g. option "home delivery" and "delivery in a pickup point". The first option will show some address fields while the latter shows a map with a list of pick-up points).

Example 
1
2
3
4
5
6
7
8
9
10

<div class="ox-form__group">
	<div class="ox-form__toggle">
		<input type="radio" name="interval" id="option-1" class="ox-form__toggle__radio" checked="checked"/>
		<label for="option-1" class="ox-form__toggle__label">Option 1</label>
		<input type="radio" name="interval" id="option-2" class="ox-form__toggle__radio"/>
		<label for="option-2" class="ox-form__toggle__label">Option 2</label>
		<input type="radio" name="interval" id="option-3" class="ox-form__toggle__radio"/>
		<label for="option-3" class="ox-form__toggle__label">Option 3</label>
	</div>
</div>

Positioning

By default radio buttons are stacked vertically. By adding the modifier .ox-form__radio--inline they will display inline.

Example

Are you happy?

Choose a brand

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="ox-form__group">
	<p class="ox-form__label" id="happiness-2">Are you happy?</p>
	<div class="ox-form__radio ox-form__radio--inline">
		<input type="radio" name="happiness-2" id="radiobutton-happy-2" class="ox-form__radio__input" value="yes" aria-describedby="happiness-2" />
		<label for="radiobutton-happy-2" class="ox-form__radio__label">Yes</label>
	</div>
	<div class="ox-form__radio ox-form__radio--inline">
		<input type="radio" name="happiness-2" id="radiobutton-notHappy-2" class="ox-form__radio__input" value="no" aria-describedby="happiness-2" />
		<label for="radiobutton-notHappy-2" class="ox-form__radio__label">No</label>
	</div>
</div>
<div class="ox-form__group">
	<p class="ox-form__label" id="brandpicker-2">Choose a brand</p>
	<div class="ox-form__checkbox ox-form__checkbox--inline">
		<input type="checkbox" id="checkbox-levis-2" class="ox-form__checkbox__input" value="Levis" aria-describedby="brandpicker-2" />
		<label for="checkbox-levis-2" class="ox-form__checkbox__label">Levis</label>
	</div>
	<div class="ox-form__checkbox ox-form__checkbox--inline">
		<input type="checkbox" id="checkbox-lee-2" class="ox-form__checkbox__input" value="Lee" aria-describedby="brandpicker-2" checked/>
		<label for="checkbox-lee-2" class="ox-form__checkbox__label">Lee</label>
	</div>
</div>

States

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<div class="ox-form__group">
	<div class="ox-form__radio">
		<input type="radio" id="radio-disabled-1" class="ox-form__radio__input" disabled/>
		<label for="radio-disabled-1" class="ox-form__radio__label">Disabled radio button</label>
	</div>
	<div class="ox-form__radio">
		<input type="radio" id="radio-disabled-2" class="ox-form__radio__input" disabled checked/>
		<label for="radio-disabled-2" class="ox-form__radio__label">Disabled checked radio button</label>
	</div>
</div>

<div class="ox-form__group">
	<div class="ox-form__checkbox">
		<input type="checkbox" id="check-disabled-1" class="ox-form__checkbox__input" disabled/>
		<label for="check-disabled-1" class="ox-form__checkbox__label">Disabled checkbox</label>
	</div>
	<div class="ox-form__checkbox">
		<input type="checkbox" id="check-disabled-2" class="ox-form__checkbox__input" disabled checked/>
		<label for="check-disabled-2" class="ox-form__checkbox__label">Disabled checked checkbox</label>
	</div>
</div>

<div class="ox-form__group">
	<input type="checkbox" value="yes" class="ox-form__pillswitch" disabled/>
</div>
<div class="ox-form__group">
	<input type="checkbox" value="yes" checked="checked" class="ox-form__pillswitch" disabled/>
</div>

<div class="ox-form__group">
	<select class="ox-form__field" disabled>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
	</select>
</div>

<div class="ox-form__group">
	<div class="ox-form__toggle">
		<input type="radio" name="interval2" id="option-a" class="ox-form__toggle__radio" disabled checked/>
		<label for="option-a" class="ox-form__toggle__label">Option a</label>
		<input type="radio" name="interval2" id="option-b" class="ox-form__toggle__radio" disabled/>
		<label for="option-b" class="ox-form__toggle__label">Option b</label>
		<input type="radio" name="interval2" id="option-c" class="ox-form__toggle__radio" disabled/>
		<label for="option-c" class="ox-form__toggle__label">Option C</label>
	</div>
</div>

<div class="ox-form__group">
	<input type="range" class="ox-form__range" disabled>
</div>

Validation

Example

Are you happy?

Choose a brand

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<div class="ox-form__group ox-is-invalid">
	<p class="ox-form__label" id="happiness-3">Are you happy?</p>
	<div class="ox-form__radio  ox-form__radio--inline">
		<input type="radio" name="happiness-3" id="radiobutton-happy-3" class="ox-form__radio__input" value="yes" aria-describedby="happiness-3" />
		<label for="radiobutton-happy-3" class="ox-form__radio__label">Yes</label>
	</div>
	<div class="ox-form__radio  ox-form__radio--inline">
		<input type="radio" name="happiness-3" id="radiobutton-notHappy-3" class="ox-form__radio__input" value="no" aria-describedby="happiness-3" />
		<label for="radiobutton-notHappy-3" class="ox-form__radio__label">No</label>
	</div>
	<span class="ox-form__feedback">Please select an option</span>
</div>

<div class="ox-form__group ox-is-invalid">
	<p id="brandpicker-3" class="ox-form__label">Choose a brand</p>
	<div class="ox-form__checkbox">
		<input type="checkbox" name="brandpicker-3" id="checkbox-levis-3" class="ox-form__checkbox__input"  value="Levis" aria-describedby="brandpicker-3" />
		<label for="checkbox-levis-3" class="ox-form__checkbox__label">Levis</label>
	</div>
	<div class="ox-form__checkbox">
		<input type="checkbox" name="brandpicker-3" id="checkbox-lee-3" class="ox-form__checkbox__input" value="Lee" aria-describedby="brandpicker-3" />
		<label for="checkbox-lee-3" class="ox-form__checkbox__label">Lee</label>
	</div>
	<span class="ox-form__feedback">Please select an option</span>
</div>

<div class="ox-form__group  ox-is-invalid">
	<label for="pill-2" class="ox-form__label">Label</label>
	<input type="checkbox" id="pill-2" class="ox-form__pillswitch"/>
	<span class="ox-form__feedback">Please toggle the pill switch</span>
</div>

<div class="ox-form__group  ox-is-invalid">
	<label for="pill-3" class="ox-form__label">Label</label>
	<input type="checkbox" id="pill-3" class="ox-form__pillswitch" checked/>
	<span class="ox-form__feedback">Please toggle the pill switch</span>
</div>

<div class="ox-form__group ox-is-invalid">
	<label for="selection-3" class="ox-form__label">Choose an option</label>
	<select id="selection-3" class="ox-form__field">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
	</select>
	<span class="ox-form__feedback">Please select an option</span>
</div>

<div class="ox-form__group ox-is-invalid">
	<label for="range-3" class="ox-form__label">Slide to value</label>
		<input type="range" id="range-3" class="ox-form__range">
	<span class="ox-form__feedback">Please select a value greater than 0</span>
</div>