Pickers are used to select one or more options in a list.
To render a checkbox picker, apply the class a-picker to an input type="checkbox"
inside a container with the class m-picker.
<fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker">
<input class="a-picker" name="checkbox-base" type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox1</label>
</div>
<div class="m-picker">
<input class="a-picker" name="checkbox-base" type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox2</label>
</div>
</fieldset>
<fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker">
<input class="a-picker" name="checkbox-with-checkbox" type="checkbox" id="ic-Checkbox1" />
<label for="ic-Checkbox1">
<div class="m-form__item -row">
<span class="a-picker__checkbox"></span>
<span class="a-picker__label">Checkbox1</span>
</div>
</label>
</div>
<div class="m-picker">
<input class="a-picker" name="checkbox-with-checkbox" type="checkbox" id="ic-Checkbox2" />
<label for="ic-Checkbox2">
<div class="m-form__item -row">
<span class="a-picker__checkbox"></span>
<span class="a-picker__label">Checkbox2</span>
</div>
</label>
</div>
</fieldset>
<fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker">
<input class="a-picker" name="checkbox-with-checkbox-description" type="checkbox" id="id-Checkbox1" />
<label for="id-Checkbox1">
<div class="m-picker__content--start">
<div class="m-form__item -row">
<span class="a-picker__checkbox"></span>
<span class="a-picker__label">Checkbox1</span>
</div>
<div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
</div>
</label>
</div>
<div class="m-picker">
<input class="a-picker" name="checkbox-with-checkbox-description" type="checkbox" id="id-Checkbox2" />
<label for="id-Checkbox2">
<div class="m-picker__content--start">
<div class="m-form__item -row">
<span class="a-picker__checkbox"></span>
<span class="a-picker__label">Checkbox2</span>
</div>
<div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
</div>
</label>
</div>
</fieldset>
<fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker">
<input class="a-picker" name="radio-base" type="radio" id="ei-Radio1" />
<label for="ei-Radio1">Radio1</label>
</div>
<div class="m-picker">
<input class="a-picker" name="radio-base" type="radio" id="ei-Radio2" />
<label for="ei-Radio2">Radio2</label>
</div>
</fieldset><fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker">
<input class="a-picker" name="with-radio" type="radio" id="ri-Radio1" />
<label for="ri-Radio1">
<div class="m-form__item -row">
<span class="a-picker__radio"></span>
<span class="a-picker__label" for="ri-Radio1">Radio1</span>
</div>
</label>
</div>
<div class="m-picker">
<input class="a-picker" name="with-radio" type="radio" id="ri-Radio2" />
<label for="ri-Radio2">
<div class="m-form__item -row">
<span class="a-picker__radio"></span>
<span class="a-picker__label" for="ri-Radio2">Radio2</span>
</div>
</label>
</div>
</fieldset><fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker">
<input class="a-picker" name="with-radio-description" type="radio" id="ide-Radio1" />
<label for="ide-Radio1">
<div class="m-picker__content--start">
<div class="m-form__item -row">
<span class="a-picker__radio"></span>
<span class="a-picker__label" for="ri-Radio1">Radio1</span>
</div>
<div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
</div>
</label>
</div>
<div class="m-picker">
<input class="a-picker"with-radio-description type="radio" id="ide-Radio2" />
<label for="ide-Radio2">
<div class="m-picker__content--start">
<div class="m-form__item -row">
<span class="a-picker__radio"></span>
<span class="a-picker__label" for="ri-Radio2">Radio2</span>
</div>
<div class="a-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.</div>
</div>
</label>
</div>
</fieldset>
Apply size classes to render pickers larger or smaller: -sm, -md, -lg.
The default size is -md.
<fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker -sm">
<input class="a-picker" type="radio" name="sizes-sm" id="Radio1">
<label for="Radio1">
<div class="m-picker__content--start">Radio1 -sm</div>
<div class="m-picker__content--end">
<span class="-text--bold -text--body -text--small -text--right">Data</span>
<span class="-text--normal -text--muted -text--small">Value</span>
</div>
</label>
</div>
<div class="m-picker -sm">
<input class="a-picker" type="radio" name="sizes-sm" id="Radio2">
<label for="Radio2">
<div class="m-picker__content--start">Radio2 -sm</div>
<div class="m-picker__content--end">
<span class="-text--bold -text--body -text--small -text--right">Data</span>
<span class="-text--normal -text--muted -text--small">Value</span>
</div>
</label>
</div>
</fieldset><fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker -md">
<input class="a-picker" type="radio" name="sizes-md" id="Radio1">
<label for="Radio1">
<div class="m-picker__content--start">Radio1 -md</div>
<div class="m-picker__content--end">
<span class="-text--bold -text--body -text--right">Data</span>
<span class="-text--normal -text--muted -text--small">Value</span>
</div>
</label>
</div>
<div class="m-picker -md">
<input class="a-picker" type="radio" name="sizes-md" id="Radio2">
<label for="Radio2">
<div class=m-picker__content--start>Radio2 -md</div>
<div class="m-picker__content--end">
<span class="-text--bold -text--body -text--right">Data</span>
<span class="-text--normal -text--muted -text--small">Value</span>
</div>
</label>
</div>
</fieldset><fieldset>
<legend class="a-label">Legend</legend>
<div class="m-picker -lg">
<input class="a-picker" type="radio" name="sizes-lg" id="Radio1">
<label for="Radio1">
<div class="m-picker__content--start">
<span class="-text--bold">Radio1 -lg</span>
<span class="-text--normal -text--body -text--small">Data:<strong> Value</strong></span>
</div>
<div class="m-picker__content-end">
<span class="-text--bold -text--body -text--large">Data</span>
</div>
</label>
</div>
<div class="m-picker -lg">
<input class="a-picker" type="radio" name="sizes-lg" id="Radio2">
<label for="Radio2">
<div class="m-picker__content--start">
<span class="-text--bold">Radio2 -lg</span>
<span class="-text--normal -text--muted -text--small">Data:<strong> Value</strong></span>
</div>
<div class="m-picker__content--end">
<span class="-text--bold -text--body -text--large">Data</span>
</div>
</label>
</div>
</fieldset>