Skip to content

Switch

A setting that applies immediately. For a value saved with a form, use Checkbox.

Sourcecomponents/switch.tsx

Saves every 30 seconds while you type.

Usage

Switch usage
import { useState } from "react";import { Field, FieldLabel } from "@/components/field";import { Switch } from "@/components/switch";
export function SwitchUsage() {  const [on, setOn] = useState(true);  return (    <Field orientation="choice">      <Switch checked={on} onCheckedChange={setOn} />      <FieldLabel>Email me when a brief is shared</FieldLabel>    </Field>  );}

When to use

Use when

A setting that takes effect immediately, in a choice row

Don’t use when

A form value saved on submit (use Checkbox)