Checkbox
Toggle between two states
Source ↗️ Report Issue ↗️Allow your users to make binary (yes/no, true/false) choices through the use of the Checkbox
component. Use them in forms, task lists, settings and preferences, filters, or consent agreements. If you need the same functionality with a visually distinct element, use the Switch
component instead.
Checkbox States
Checkboxes can have different states. Use the checked
and disabled
props to make a checkbox checked by default, or make it non interactive:
Labels and Styles
Checkboxes can be created without labels and up to two additional labels using the label
and subText
props. The subText
prop also supports HTML tags:
Their appearance and color can also be styled on an individual level, using the color
prop:
However, if you need to use a custom color for your checkboxes globally, the preferred way to set colors is to override the following CSS variable:
API
Prop | Purpose |
---|---|
checked | Sets the checkbox checked by default. Defaults to false . |
label | Set a label for the checkbox. |
subText | Specify additional text below the checkbox. The string can include HTML tags. |
disabled | Sets the checkbox to disabled. Defaults to false . |
color | Sets the color of the checkbox. |
className | Pass additional CSS classes for the checkbox. |
Svelte & React Prop | Purpose |
---|---|
onClick | Attach on-click event listeners. |
Request improvement for this page