# Switch: In a field

> With `Field`, the label and description are linked to the switch.

Example: https://hextaui.com/docs/switch/examples/field
Component docs: https://hextaui.com/docs/switch.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/switch-field.json
```

This adds `components/examples/switch/field.tsx` with the Switch component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/switch/field.tsx"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

export function SwitchField() {
  return (
    <Field orientation="horizontal" className="w-full max-w-sm">
      <FieldContent>
        <FieldLabel>Marketing emails</FieldLabel>
        <FieldDescription>
          Product news and offers, about once a month.
        </FieldDescription>
      </FieldContent>
      <Switch name="marketing" />
    </Field>
  )
}
```

## Props in this example

### Switch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | – |  |

## More Switch examples

- [iOS](https://hextaui.com/docs/switch/examples/ios.md)
- [Saving](https://hextaui.com/docs/switch/examples/async.md)
- [On and off marks](https://hextaui.com/docs/switch/examples/icons.md)
- [Sizes](https://hextaui.com/docs/switch/examples/sizes.md)
- [Disabled and read-only](https://hextaui.com/docs/switch/examples/states.md)
- [Controlled](https://hextaui.com/docs/switch/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/switch/examples/rtl.md)