# Switch A labeled on/off switch on the Field contract, with the label to its right: pass `label`, and `checked` with `onCheckedChange` (or `defaultChecked`). Clicking the label or pressing Space flips it; the thumb slides and stretches while pressed. With `name`, a switch that is on submits `name=value` with its form. ```tsx import { Switch } from "@/components/ouro/switch/switch"; ``` ## Example ```tsx ``` ## Usage Use it for a setting that takes effect at once. ## Use instead when - Use `Checkbox` instead for a choice that applies when a form is submitted, such as accepting terms. ## Props Type: `SwitchProps`. | Prop | Type | Description | | --- | --- | --- | | `checked` | `boolean` | Whether it is on, for a controlled switch; pair it with `onCheckedChange`. | | `className` | `string` | Layout only: margins, width, grid placement (`mt-4`, `col-span-2`). Appearance classes warn in development; style switches in your theme. | | `defaultChecked` | `boolean` | Whether it starts on, for an uncontrolled switch. | | `description` | `ReactNode` | Supporting text under the label, read after it through `aria-describedby`. | | `disabled` | `boolean` | Disables the switch and fades it. | | `error` | `ReadonlyErrorMessages` | What is wrong, from your server action or client check, shown under the label; the switch gets `aria-invalid`. A message is text or a React node (one with a link); an empty string or array means valid. | | `hideLabel` | `boolean` | Hides the label visually; screen readers still read it as the switch's name. | | `label` (required) | `string` | The setting it turns on, shown to the right of the switch and read as its name. Required: every control needs a name. To hide it visually, keep it and add `hideLabel`. | | `name` | `string` | The form field name it submits under when on. | | `onCheckedChange` | `((checked: boolean) => void)` | Called with the new state when it turns on or off. | | `readOnly` | `boolean` | Shows the state but ignores clicks and keys, unlike `disabled`, which also fades it. | | `ref` | `Ref` | The track element, a ``. | | `required` | `boolean` | The switch must be on to submit the form: it gets `required` and `aria-required`, and the label a marker. | | `value` | `string` | What it submits when on (`on` without one). | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `defaultValue`: Not a prop. A switch's starting state is `defaultChecked`: ``. - `errorMessage`: Not a prop. Ouro UI uses `error`: ``. - `helperText`: Not a prop. Ouro UI uses `description`: ``. - `invalid`: Not a prop. `error` marks the switch invalid: ``. - `isChecked`: Not a prop. Ouro UI uses `checked`: ``. - `isDisabled`: Not a prop. Ouro UI uses `disabled`: ``. - `isInvalid`: Not a prop. `error` marks the switch invalid: ``. - `isRequired`: Not a prop. Ouro UI uses `required`: ``. - `onChange`: Not a prop. Ouro UI uses `onCheckedChange`, which gets the new state: `onCheckedChange={setOn}`. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element. ## Types ### `ErrorMessage` One error message: text, or a React element for a message that carries a link or other markup. ```ts type ErrorMessage = string | ReactElement; ``` ### `ReadonlyErrorMessages` A read-only message view accepted by fields and Form; mutable input arrays remain valid. ```ts type ReadonlyErrorMessages = ErrorMessage | readonly ErrorMessage[]; ```