Checkbox
Maintainer:
zamkovskaya
size
content
checked
disabled
indeterminate
import {Checkbox} from '@gravity-ui/uikit';
The Checkbox component allows the user to select or deselect a specific value.
States
A Checkbox can have different states:
- Checked: The checkbox is ticked.
- Disabled: The checkbox is unavailable.
- Indeterminate: The checkbox is in an intermediate state between being ticked and unticked.
<Checkbox size="l" checked={false}>Unchecked</Checkbox>
<Checkbox size="l" checked>Checked</Checkbox>
<Checkbox size="l" disabled>Disabled</Checkbox>
<Checkbox size="l" indeterminate>Indeterminate</Checkbox>Size
Use the size property to manage the Checkbox size. The default size is m.
<Checkbox size="m">M Size</Checkbox>
<Checkbox size="l">L Size</Checkbox>
<Checkbox size="xl">XL Size</Checkbox>Label
You can assign a label to a Checkbox using the content property or provide it as a child property.
<div>
<Checkbox content="Content" size="l" />
<div
style={{
marginTop: 10,
}}
>
<Checkbox size="l">
<span>Content as children</span>
</Checkbox>
</div>
</div>Properties
| Name | Description | Type | Default |
|---|---|---|---|
| children | Checkbox content (usually, a label). | ReactNode | |
| content | Checkbox content (alternative to children). | ReactNode | |
| disabled | Toggles the disabled state of the checkbox. | boolean | false |
| checked | Toggles the checked state of the checkbox. | boolean | false |
| defaultChecked | Sets the initial checked state when the component is mounted. | boolean | false |
| onUpdate | Fires when the user changes the checkbox state and provides the checked value as a callback argument. | (checked: boolean) => void | |
| onChange | Fires when the user changes the checkbox state and provides the change event as a callback argument. | Function | |
| onFocus | Event handler to use when the checkbox input element receives focus. | Function | |
| onBlur | Event handler to use when the checkbox input element loses focus. | Function | |
| size | Determines the checkbox size. | m l | m |
| id | id HTML attribute | string | |
| qa | data-qa HTML attribute, used for testing | string | |
| style | style HTML attribute | React.CSSProperties | |
| className | class HTML attribute | string | |
| title | title HTML attribute | string | |
| name | name HTML attribute for the input element. | string | |
| value | value HTML attribute for the input element. | string | |
| indeterminate | Toggles the indeterminate state of the checkbox. | boolean | false |
| controlProps | Additional propeties for the underlying input element. | React.InputHTMLAttributes<HTMLInputElement> | |
| controlRef | Ref to the underlying input element. | React.Ref<HTMLInputElement> |