Docs
πŸ—οΈ ⏐ Components
Form
Checkbox

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{}(8 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:

PropDescriptionDefault
checkedWhether the checkbox is checked or not.
boolean
false
intermediateWhether the checkbox is in an intermediate state or not.
boolean
false
labelLabel for the checkbox.
string
disabledWhether the checkbox is disabled or not.
boolean
sizeSize of the checkbox.
string
medium
classNameAdditional class names to apply to the checkbox.
string
containerClassNameAdditional class names to apply to the container.
string
labelClassNameAdditional class names to apply to the label.
string
borderPathCustom svg path for border.
string
M 0 0 L 0 16 L 16 16 L 16 0 Z
checkedPathCustom svg path for checked state.
string
M 5.36396 8.17792 L 7.34236 9.91424 L 10.6044 5.832
intermediatePathCustom svg path for intermediate state.
string
M 5.36396 8.17792 L 10.6044 8.17792
onChangeEvent handler for when the checkbox is changed.
(value: boolean) => void
onBlurEvent handler for when the checkbox is blurred.
(event: FocusEvent<HTMLDivElement, Element>) => void
themeTheme for the Checkbox.
CheckboxTheme
refThe 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.