Checkbox
Checkboxes are used to provide users with multiple options for selection in a series of options.
When used as a toggle they allow the user to make a binary choice usually (but not limited) in the form of a yes/no or on/off suggestion. Toggles are often used in product settings or as filter options. When engaged (on), Base Web toggles are colored and when disengaged (off) they’re grey.
When to use
- When a collection of options share context.
- When a user wants to toggle an option on/off.
- When a user wants to select multiple options.
Examples
As with many of our components, there is also an uncontrolled version, StatefulCheckbox, which manages its own state.
API
Checkbox props
| Name | Type | Default | Description |
|---|---|---|---|
autoFocus | boolean | false | If true the component will be focused on the first mount. |
checked | boolean | false | Renders component in checked state. |
children | react node | The React Nodes displayed next to the checkbox. | |
containsInteractiveElement | boolean | false | Indicates the radio contains an interactive element, and the default label behavior should be prevented for child elements. |
disabled | boolean | false | Renders component in disabled state. |
inputRef | ref | A ref to access an input element. | |
intent | 'default' | 'success' | 'warning' | 'error' | 'ai' | Defines the intent of the Checkbox. | |
isIndeterminate | boolean | false | Indicates indeterminate state for the checkmark. Checked property is ignored. |
labelPlacement | 'top' | 'bottom' | 'left' | 'right' | right | Determines how to position the label relative to the checkbox. |
name | string | Name attribute. | |
onBlur | function | Called the onBlur event triggers. | |
onChange | function | Called when checkbox value is changed. | |
onFocus | function | Called the onFocus event triggers. | |
onMouseDown | function | Called when mouseDown triggers. | |
onMouseEnter | function | Called when mouseEnter triggers. | |
onMouseLeave | function | Called when mouseLeave triggers. | |
overrides | custom | Lets you customize all aspects of the component. | |
required | boolean | false | Renders component in required state. |
size | 'sm' | 'md' | 'lg' | md | The size of the component |
title | string | Title attribute. |
You can check the implementation of the component for more details.
Checkbox exports
You can import this module like so:
import {Checkbox} from 'spaceweb/checkbox'It exports the following components or utility functions:
- Checkbox
- STATE_TYPE
- STYLE_TYPE
- StatefulCheckbox
- StyledCheckmark
- StyledInput
- StyledLabel
- StyledRoot
- StyledToggle
- StyledToggleTrack