Checkbox
Capture boolean input from user
Import
Source
Docs
Package
Usage
States
Change icons
Change icon color
Use iconColor
prop to change icon color. You can reference colors from theme.colors
or use any valid CSS color:
Indeterminate state
Checkbox
supports indeterminate state. When indeterminate
prop is set,
checked
prop is ignored (checkbox always has checked styles):
Controlled
Label with link
Checkbox with tooltip
You can change target element to which tooltip is attached with refProp
:
- If
refProp
is not set, the tooltip is attached to the checkbox input - If
refProp="rootRef"
is set, the tooltip is attached to the root element (contains label, input and other elements)
Pointer cursor
By default, checkbox input and label have cursor: default
(same as native input[type="checkbox"]
).
To change cursor to pointer, set cursorType
on theme:
Add custom sizes
You can add any number of custom sizes with data-size attribute:
Add props to the root element
All props passed to the component are forwarded to the input element. If you need to add props to the root element, use wrapperProps
. In the following example:
data-testid="wrapper"
is added to the root elementdata-testid="input"
is added to the input element
Checkbox.Group
This is anonymous
Controlled Checkbox.Group
Get element ref
Styles API
Checkbox
supports Styles API, you can add styles to any inner element of the component withclassNames
prop. Follow Styles API documentation to learn more.
Checkbox description
Checkbox error
Component Styles API
Hover over selectors to highlight corresponding elements
Example: Table with row selection
Element position | Element name | Symbol | Atomic mass | |
---|---|---|---|---|
6 | Carbon | C | 12.011 | |
7 | Nitrogen | N | 14.007 | |
39 | Yttrium | Y | 88.906 | |
56 | Barium | Ba | 137.33 | |
58 | Cerium | Ce | 140.12 |
Example: Checkbox card
Example: Customize with Styles API
Accessibility
Set aria-label
or label
prop to make the checkbox accessible: