An ecosystem-agnostic, accessible checkbox that can be styled as needed.
Import
import {Checkbox} from '@fuegokit/react'
Usage
Accessibility
Checkboxes should always be accompanied by a corresponding 'label' to improve support for assistive technologies.
If the checkbox does not have a visible label, use the <VisuallyHidden> component, or an aria-label or aria-labelledby
prop must be passed instead to identify the element to assistive technology.
When the checkbox has focus, pressing the Space key changes the state of the checkbox.
Anatomy
Checkboxes consist of an HTML input element and must have an associated HTML label element.
Platform-specific implementations of Checkbox like AtlasCheckbox include an accessible label, but when using the Checkbox primitive, provide a label.
Checkbox
Default value
Checkboxes are not selected by default. Use the native defaultSelected prop to set the default state.
Indeterminate states
A Checkbox can be in an indeterminate state, controlled using the indeterminate prop. This overrides the appearance of the Checkbox, whether selection is controlled or uncontrolled.