Checkbox
The Checkbox component is an essential element in UI/UX design, allowing users to make selections among a set of options. It enhances user control by enabling or disabling specific choices, thereby facilitating interactive and dynamic forms, settings, and controls within applications.
Examples
Basic Usage
This basic example showcases a checkbox that users can click to enable or disable an option. It demonstrates the component's primary functionality - toggling between checked and unchecked states:
Advanced Customization
Size Variations
Customize the size of the Checkbox to match the design requirements of your application, offering variations like small, medium, and large for better visual integration and user experience:
State Variations
Implement checkboxes with additional states such as disabled for non-interactive scenarios and intermediate for partially selected groups or indeterminate states:
Theme Customization
The Checkbox component features a default theme that can be customized to align with your application's aesthetics. Here's an overview of the theme structure:
- root{}(7 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
Fine-tune the Checkbox component's functionality and style with a wide array of configurable properties:
| Prop | Description | Default |
|---|---|---|
checked | Whether the checkbox is checked or not.boolean | false |
intermediate | Whether the checkbox is in an intermediate state or not.boolean | false |
label | Label for the checkbox.ReactNode | |
labelPosition | Label position of checkbox."start" | "end" | end |
disabled | Whether the checkbox is disabled or not.boolean | |
size | Size of the checkbox.string | medium |
className | Additional class names to apply to the checkbox.string | |
containerClassName | Additional class names to apply to the container.string | |
labelClassName | Additional class names to apply to the label.string | |
borderPath | Custom svg path for border.string | M 1 0 L 16 0 C 16.552 0 17 0.448 17 1 L 17 15 C 17 15.552 16.552 16 16 16 L 1 16 C 0.448 16 0 15.552 0 15 L 0 1 C 0 0.448 0.448 0 1 0 Z |
checkedPath | Custom svg path for checked state.string | M 4 8 L 8 12 L 12 4 |
intermediatePath | Custom svg path for intermediate state.string | M 5.36396 8.17792 L 10.6044 8.17792 |
onChange | Event handler for when the checkbox is changed.(value: boolean) => void | |
onBlur | Event handler for when the checkbox is blurred.(event: FocusEvent<HTMLDivElement, Element>) => void | |
theme | Theme for the Checkbox.CheckboxTheme | |
ref | The ref to the checkbox element.LegacyRef<HTMLDivElement> |
Design and Usability Tips
- Visual Clarity: Ensure checkboxes are large enough to be easily tapped on touch devices, adhering to accessible design principles. A minimum touch target size of 44x44 pixels is recommended. This enhances usability across various devices, particularly for users with motor impairments.
- Label Legibility: Accompany every checkbox with a clear and concise label. Labels should be directly clickable to toggle the checkbox state, reducing the precision required for interaction and thus improving the overall user experience.