Toggle v0.5.0 · @behivetech

A bare toggle/switch control (built on Radix's Switch) — the Radix switch button is this component's own root element. It has no built-in label/hint/error; wrap it in FormField for that chrome.

Usage

1import { Toggle } from '@behivetech/atoms.toggle';
2import { FormField } from '@behivetech/forms.form-field';
3
4const [checked, setChecked] = useState(false);
5
6<Toggle checked={checked} onCheckedChange={setChecked} />
7
8<FormField label="Dark mode" htmlFor="dark-mode">
9  <Toggle id="dark-mode" checked={checked} onCheckedChange={setChecked} />
10</FormField>

Pass invalid (adds the --invalid modifier and sets aria-invalid) to visually mark the toggle as invalid (pair with FormField's error prop for the message).

Examples

Open all 4 →

Basic Toggle

1const BasicToggle = () => {
2  const [checked, setChecked] = useState(false);
3  return <Toggle checked={checked} onCheckedChange={setChecked} />;
4};
5
6render(<BasicToggle />);

Toggle With Form Field

1const ToggleWithFormField = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <FormField
5      label="Dark mode"
6      htmlFor="dark-mode"
7      hint="Switch between light and dark color themes"
8    >
9      <Toggle id="dark-mode" checked={checked} onCheckedChange={setChecked} />
10    </FormField>
11  );
12};
13
14render(<ToggleWithFormField />);

Properties

`Toggle` props

Prop	Type	Default	Description
`asChild`	`boolean`	—	—
`className`	`string`	—	Additional class names to merge with the component root element
`invalid`	`boolean`	`false`	Marks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"`

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).

Usage

Examples

Properties

Toggle props

`Toggle` props