开关

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

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 组件添加 isDisabled 属性以禁用开关。向 Field 组件添加 data-disabled 属性以设置样式。

Disabled

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

向 Switch 组件添加 data-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"

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

المشاركة عبر الأجهزة

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

"use client"

import * as React from "react"

请参阅 React Aria Switch 文档。