Checkbox

A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.

install	yarn add @clayui/form
version	3.122.0

Stable 3.122.0 View in Lexicon CHANGELOG

Default
Inline
Disabled
Without Labels
Custom
- Checkboxes
  - Indeterminate
- Radios

Don't forget to check WAI-ARIA accessibility pratices for checkboxes when writting your markup.

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. By Bootstrap

Default

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

Checkboxes

Default checkbox

Disabled checkbox

Code Sample (expand to see it)

<div class="form-check">
	<input
		class="form-check-input"
		type="checkbox"
		value=""
		id="defaultCheck1"
	/>
	<label class="form-check-label" for="defaultCheck1">
		Default checkbox
	</label>
</div>
<div class="form-check">
	<input
		class="form-check-input"
		type="checkbox"
		value=""
		id="defaultCheck2"
		disabled
	/>
	<label class="form-check-label" for="defaultCheck2">
		Disabled checkbox
	</label>
</div>

Radios

Default radio

Second default radio

Disabled radio

Code Sample (expand to see it)

<div class="form-check">
	<input
		class="form-check-input"
		type="radio"
		name="exampleRadios"
		id="exampleRadios1"
		value="option1"
		checked
	/>
	<label class="form-check-label" for="exampleRadios1"> Default radio </label>
</div>
<div class="form-check">
	<input
		class="form-check-input"
		type="radio"
		name="exampleRadios"
		id="exampleRadios2"
		value="option2"
	/>
	<label class="form-check-label" for="exampleRadios2">
		Second default radio
	</label>
</div>
<div class="form-check">
	<input
		class="form-check-input"
		type="radio"
		name="exampleRadios"
		id="exampleRadios3"
		value="option3"
		disabled
	/>
	<label class="form-check-label" for="exampleRadios3">
		Disabled radio
	</label>
</div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Checkbox

Code Sample (expand to see it)

<div class="form-check form-check-inline">
	<label class="form-check-label">
		<input
			class="form-check-input"
			type="checkbox"
			value=""
			id="inlineCheckbox1"
		/>
		<span class="form-check-label-text">1</span>
	</label>
</div>
<div class="form-check form-check-inline">
	<label class="form-check-label">
		<input
			class="form-check-input"
			type="checkbox"
			value=""
			id="inlineCheckbox2"
			disabled
		/>
		<span class="form-check-label-text">2</span>
	</label>
</div>

Radio

Code Sample (expand to see it)

<div class="form-check form-check-inline">
	<label class="form-check-label">
		<input
			class="form-check-input"
			type="radio"
			name="inlineRadioOptions"
			value="option1"
			id="inlineRadio1"
		/>
		<span class="form-check-label-text">1</span>
	</label>
</div>
<div class="form-check form-check-inline">
	<label class="form-check-label">
		<input
			class="form-check-input"
			type="radio"
			name="inlineRadioOptions"
			value="option2"
			id="inlineRadio2"
			disabled
		/>
		<span class="form-check-label-text">2</span>
	</label>
</div>

Disabled

Disable checkboxes or radios by adding a disabled prop.

Toggle this custom radio

Check this custom checkbox

Code Sample (expand to see it)

<div class="custom-control custom-radio">
	<label>
		<input
			disabled=""
			class="custom-control-input"
			id="radio1"
			name="customDisabledRadio"
			type="radio"
		/>
		<span class="custom-control-label">
			<span class="custom-control-label-text"
				>Toggle this custom radio</span
			>
		</span>
	</label>
</div>
<div class="custom-control custom-checkbox">
	<label>
		<input
			disabled=""
			class="custom-control-input"
			type="checkbox"
			id="customDisabledCheck1"
		/>
		<span class="custom-control-label">
			<span class="custom-control-label-text"
				>Check this custom checkbox</span
			>
		</span>
	</label>
</div>

Without Labels

Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

Code Sample (expand to see it)

<div class="form-check">
	<label class="form-check-label">
		<input
			class="form-check-input"
			type="checkbox"
			id="withoutLabelCheckbox"
			value=""
		/>
	</label>
</div>
<div class="form-check">
	<label class="form-check-label">
		<input
			class="form-check-input"
			type="checkbox"
			id="withoutLabelCheckbox1"
			value=""
		/>
	</label>
</div>

Custom

The two ways for you to structure the marking of a Checkbox and Radio:

It is packaged in a classless <label> and <label class="custom-control-label"/> is replaced by <span>:

Code Sample (expand to see it)

<div class="custom-control custom-checkbox">
	<label>
		<input class="custom-control-input" type="checkbox" id="customCheck1" />
		<span class="custom-control-label">
			<span class="custom-control-label-text"
				>Check this custom checkbox</span
			>
		</span>
	</label>
</div>

Using the id binding engine with <label />and <input />.

Code Sample (expand to see it)

<div class="custom-control custom-checkbox">
	<input class="custom-control-input" type="checkbox" id="customCheck2" />
	<label class="custom-control-label" for="customCheck2">
		<span class="custom-control-label-text"
			>Check this custom checkbox</span
		>
	</label>
</div>

Checkboxes

Check this custom checkbox

Code Sample (expand to see it)

<div class="custom-control custom-checkbox">
	<label>
		<input class="custom-control-input" type="checkbox" id="customCheck1" />
		<span class="custom-control-label">
			<span class="custom-control-label-text"
				>Check this custom checkbox</span
			>
		</span>
	</label>
</div>

Custom Checkbox Indeterminate

Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Indeterminate

Radios

Toggle this custom radio

Or toggle this other custom radio

Code Sample (expand to see it)

<div class="custom-control custom-radio">
	<label>
		<input
			checked=""
			class="custom-control-input"
			id="radio1"
			name="customRadio"
			type="radio"
		/>
		<span class="custom-control-label">
			<span class="custom-control-label-text"
				>Toggle this custom radio</span
			>
		</span>
	</label>
</div>
<div class="custom-control custom-radio">
	<label>
		<input
			class="custom-control-input"
			id="radio1"
			name="customRadio"
			type="radio"
		/>
		<span class="custom-control-label">
			<span class="custom-control-label-text"
				>Or toggle this other custom radio</span
			>
		</span>
	</label>
</div>