Skip to content
EvolveEvolveEvolve

Switch

An on/off switch based on react-aria-components, announced as a switch: a setting that applies at once, such as "Only show differences". A choice submitted with a form is a Checkbox.

import { Switch } from "@evolve-storefront/ui/switch";
Design notes

Like Checkbox, the track carries our own state attributes (data-checked, data-disabled, data-focus-visible), read from the primitive's render props.

Preview

DefaultOpen in Storybook ↗

Usage

A setting that applies at once; clicking the label toggles it too.

<Switch checked={onlyDifferences} onCheckedChange={setOnlyDifferences}>
  {t("only-differences")}
</Switch>;

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 state, so it cannot be onChange.

disabled?boolean
children?ReactNode

The visible label; it is also the switch's accessible name.

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

Examples

VariantsThe states side by side: off, on, and on but disabled, as for a setting the organization enforces.
<Switch defaultChecked>{t("only-differences")}</Switch>
// Shown but not changeable, e.g. a setting the organization enforces.
<Switch defaultChecked disabled>{t("approval-required")}</Switch>
Open in Storybook ↗