'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Components · Checkbox
Checkbox
Binary or mixed-state selection control.
Anatomy
- 1
.checkbox-rootInteractive control and label composition. - 2
.checkbox-controlVisual checked-state container. - 3
.checkbox-indicatorCheckmark or mixed-state glyph. - 4
.checkbox-labelControl label.
Default
Compositions
The component in context, beside others. Open the code to see the file verbatim.
Settings list
When to use
Use checkboxes when people may select any number of independent options, including none.
Interaction states →