README
title: Control input description: Control inputs help users input one or more selections from multiple options. Our control inputs consist of checkboxes and radio buttons. group: Forms
Checkbox
Check boxes allow users to select one or more items.
<ControlGroup>
<Checkbox checked={false}>Phone</Checkbox>
<Checkbox checked={true}>Tablet</Checkbox>
</ControlGroup>
Radio
Radio inputs allow users to select one item at a time.
<ControlGroup>
<Radio checked={false}>Phone</Radio>
<Radio checked={true}>Tablet</Radio>
</ControlGroup>
Checkbox block
Inline checkbox options can sometimes be difficult to scan. Users may find it challenging to determine with which label the checkbox option corresponds: the one before the checkbox or the one after. Vertical positioning of checkbox, with one choice per line, eliminates this potential cause for confusion.
<ControlGroup block>
<Checkbox checked={false}>Phone</Checkbox>
<Checkbox checked={true}>Tablet</Checkbox>
<Checkbox checked={true}>Laptop</Checkbox>
</ControlGroup>
Radio block
Vertically stacked radio buttons.
<ControlGroup block>
<Radio checked={false}>Phone</Radio>
<Radio checked={false}>Tablet</Radio>
<Radio checked={true}>Laptop</Radio>
</ControlGroup>
Valid and invalid states
Add a border around the control inputs to indicate valid or invalid selections.
<ControlGroup>
<Radio checked={false} valid>
Phone
</Radio>
<Radio checked={true} invalid>
Tablet
</Radio>
</ControlGroup>
Disabled control inputs
Disabled control inputs can be used to indicate inputs that are no longer valid or expired.
<ControlGroup>
<Radio checked={false} disabled>
Phone
</Radio>
<Radio checked={true} disabled>
Tablet
</Radio>
</ControlGroup>
Small inputs
Smaller versions of control inputs.
<ControlGroup>
<Radio checked={false} size="sm">
Phone
</Radio>
<Radio checked={true} size="sm">
Tablet
</Radio>
</ControlGroup>