Skip to content
EvolveEvolveEvolve

Checkbox

Checkbox based on react-aria-components. Token-driven; the visual box is a rendered element toggled via the primitive's selection state, so the label text is plain children. Invalid state comes from the enclosing RAC form context.

import { Checkbox } from "@evolve-storefront/ui/checkbox";
Design notes

The indicator carries our own state attributes, read out of the primitive's render props rather than inherited from its root through group-*. That is what makes data-checked possible at all: RAC calls the state data-selected, and the prop is checked (HTML's word), so styling against group-data-[selected] meant the brand contract disagreed with the API in the same component.

Preview

DefaultOpen in Storybook ↗

Usage

<Checkbox name="acceptTerms" required>
  {t("acceptTerms")}
</Checkbox>;

Props

PropTypeDescription
data-component?undefined

Not a caller's to rename — see controlProps.

name?string
value?string
checked?boolean

HTML's name, because HTML has one — never isChecked.

defaultChecked?boolean
onCheckedChange?((checked: boolean) => void)

Hands over the new checked state, so it cannot be onChange.

indeterminate?boolean
disabled?boolean
required?boolean
invalid?boolean
children?ReactNode

Any other props go to the root element, like on a plain HTML element.

Examples

VariantsThe states side by side: unchecked, checked, and checked but disabled, as for a setting the organization enforces.
<Checkbox name="newsletter" defaultChecked>{t("subscribeToNewsletter")}</Checkbox>
// Shown but not changeable, e.g. a setting the organization enforces.
<Checkbox name="orderConfirmations" defaultChecked disabled>{t("orderConfirmations")}</Checkbox>
Open in Storybook ↗