Accessible, ecosystem-agnostic native checkbox primitive
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

An ecosystem-agnostic, accessible checkbox that can be styled as needed.


import {Checkbox} from '@fuegokit/react'



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.


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.



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.

See also