@ag.ds-next/control-input

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 storybookPath: /story/forms-checkbox--on-light

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>