Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Checkbox
Designer doc
Checkbox component allows users to select one or more options.
Example
Basic usage
Default
Disabled
Disabled checked
Tri-state
Disabled mixed
Custom icon
Invalid
Invalid disabled
Invalid disabled checked
Tri-state
Disabled mixed
View code
Checkbox Group
Checkbox group
Select all
The Beatles
Oasis
Coldplay
View code
Accessbility
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
- Tri-state Checkbox: https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox-mixed.html
API
Checkbox
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| checked | Value | Controlled value of the checkbox. Pass null to indicates intermediate check for tri-state checkbox. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| icon | ReactElement<CheckboxIconProps, any> | <CheckboxIcon /> | Specify custom icon element or use CheckboxIcon with a certain custom props. |
| initialChecked | Value | Uncontrolled value of the checkbox. Note that passing null to this prop may lead to weird behaviour. Because internally, checked state only switches between true and false. | |
| invalid | boolean | ||
| keyboardClickKeys | string[] | [' '] | |
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onChange | (checked: Value) => void | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> |
CheckboxIcon
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |