111k
新建

Switch

PreviousNext

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

Radix UIBase UI
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 />

示例

描述

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

import {
  Field,
  FieldContent,

选择卡片

卡片式选择，其中 FieldLabel 包裹整个 Field，形成可点击的卡片模式。

import {
  Field,
  FieldContent,

禁用

给 Switch 组件添加 disabled 属性即可禁用开关。给 Field 组件添加 data-disabled 属性用于样式控制。

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

无效

给 Switch 组件添加 aria-invalid 属性来表示无效状态。给 Field 组件添加 data-invalid 属性用于样式控制。

You must accept the terms and conditions to continue.

import {
  Field,
  FieldContent,

尺寸

使用 size 属性来改变开关大小。

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

RTL

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

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

"use client"

import * as React from "react"

API 参考

更多信息请参见 Base UI Switch 文档。