Switch

Toggle a boolean value with an animated pill switch and optional label and help text.

Switch is a client component that renders a controlled toggle built on the Headless UI Switch, with the thumb animated by motion/react. Use it for on/off settings. It does not manage its own state; pass value and update it from onChange.

Email notificationsReceive a summary of activity once a day.

Notifications are on.

Import#

typescript

import { Switch } from "@reactberry/system/blocks";

Usage#

typescript

import { useState } from "react";
import { Switch } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function NotificationSettings() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Box width="20rem">
      <Switch
        value={enabled}
        onChange={setEnabled}
        label="Email notifications"
        help="Receive a summary of activity once a day."
      />
    </Box>
  );
}

Examples#

Without a visible label#

When neither label nor help is provided, only the switch track is rendered. Pass ariaLabel to label it for assistive technology.

Custom row layout#

Spread props override the row defaults; here flexDirection="row-reverse" places the switch before its label.

Compact layout

Auto-save drafts

API#

Switch#

Prop	Type	Default	Description
`value`	`boolean`	`false`	Whether the switch is on. Controls the track colour (`brand` when on) and thumb position
`onChange`	`((newValue: boolean) => void)`	—	Called with the inverted `value` when the row is clicked
`label`	`string`	—	Bold primary text shown before the switch
`help`	`string`	—	Secondary text shown below the label in a smaller size
`ariaLabel`	`string`	—	Accessible label for the switch. Falls back to `label` when omitted

Any other props are spread onto the outer row (a Text rendered as a div with display="flex", gap="small", alignItems="center", justifyContent="space-between" and width="100%"), so layout and style props can override those defaults.

Accessibility#

The inner switch element is given role="checkbox", aria-checked, and tabIndex=0. Its aria-label is ariaLabel, falling back to label.
A hidden native checkbox input (display: none) is also rendered and kept in sync with value.
Keyboard toggling is handled by the Headless UI Switch, but no onChange is passed to it directly, so keyboard activation may not call your onChange. Verify keyboard behaviour if it is required.

Notes#

The whole row is clickable; onChange fires from the row's onClick, so clicks on the label and help text also toggle the value.