开关

允许用户在选中和未选中之间切换的控件。

Airplane Mode

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

安装


pnpm dlx shadcn@latest add switch

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

<Switch />

Share across devices

Focus is shared across devices, and turns off when you leave the app.

import {
  Field,
  FieldContent,

卡片样式的选择，FieldLabel 包裹整个 Field，实现可点击的卡片模式。

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

import {
  Field,
  FieldContent,

向 Switch 组件添加 disabled 属性以禁用开关。向 Field 组件添加 data-disabled 属性以便样式化。

Disabled

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

向 Switch 组件添加 aria-invalid 属性以指示无效状态。向 Field 组件添加 data-invalid 属性以便样式化。

Accept terms and conditions

You must accept the terms and conditions to continue.

import {
  Field,
  FieldContent,

使用 size 属性更改开关的大小。

Small

Default

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

请参阅 Base UI Switch 文档。