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 |
Stable3.122.0View in LexiconCHANGELOG
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
<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
<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
<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
<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.
<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
).
<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>
:
<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 />
.
<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
<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).
Radios
<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>