# antuikit / Switch

> Switch, with a `color` for the on track, a `shape` for its corners, and a hover state while a wrapping `<label>` is hovered.

Docs: https://antuikit.com/docs/components/switch

## Install

npx antuikit@latest init
npx antuikit@latest add switch

## Import

import { Switch } from "@/components/ui/switch";

## Demos

- [Basic](https://ui.antuikit.com/embed/switch/basic.md): Set `defaultChecked` to start a switch on, and give each switch an `aria-label` or visible text that names the setting.
- [Sizes](https://ui.antuikit.com/embed/switch/sizes.md): Set `size="small"` for a smaller switch in dense rows and table cells, next to the default size.
- [Shapes](https://ui.antuikit.com/embed/switch/shapes.md): Set `shape` to `square`, `squircle` or `default` to change the corners of the track, and the knob follows them.
- [Status colors](https://ui.antuikit.com/embed/switch/status-colors.md): Set `color` to `success`, `warning` or `error` to paint the on track, its hover and its focus ring in that status color.
- [Preset colors](https://ui.antuikit.com/embed/switch/preset-colors.md): Set `color` to any color name in your theme, like `blue`, `volcano` or `emerald`, to paint the on track in that hue.
- [Text and icon](https://ui.antuikit.com/embed/switch/text-icon.md): Pass `checkedChildren` and `unCheckedChildren` to show short text or an icon inside the track for each state.
- [Disabled](https://ui.antuikit.com/embed/switch/disabled.md): Set `disabled` to lock a switch in its current state, with a button beside it that turns the lock on and off.
- [Loading](https://ui.antuikit.com/embed/switch/loading.md): Set `loading` to show a spinner on the knob and block clicks while a change saves, here in every shape and both sizes.
- [In form: horizontal](https://ui.antuikit.com/embed/switch/in-form-horizontal.md): Put a Switch in a `Form.Item` with `valuePropName="checked"` so the form reads and sets its state, with the label beside it.
- [In form: vertical](https://ui.antuikit.com/embed/switch/in-form-vertical.md): Set the Form's `layout` to `vertical` to put the label above the switch, still bound with `valuePropName="checked"`.
- [With description](https://ui.antuikit.com/embed/switch/with-description.md): A setting row wrapped in a `<label>`, with a title and a description, so clicking the text toggles the switch.
- [Switch group](https://ui.antuikit.com/embed/switch/switch-group.md): Three related settings stacked as label rows, each with a title, a description and its own switch.
- [Feature flags](https://ui.antuikit.com/embed/switch/feature-flags.md): A card of feature flags where each switch shows `loading` while its change saves, then settles in the new state.
- [Dangerous setting](https://ui.antuikit.com/embed/switch/destructive.md): A red switch behind a Popconfirm, controlled so it only turns on after the user confirms the deletion.
- [Feature card grid](https://ui.antuikit.com/embed/switch/card-grid.md): A grid of feature cards where each whole card is a `<label>`, so a click anywhere on it toggles its switch.
- [Permissions matrix](https://ui.antuikit.com/embed/switch/settings-table.md): A compact table of permissions with a small switch in every cell, one row per action and one column per role.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/switch`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Switch` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.