109k
新建

开关

上一页下一页

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

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

示例

描述

焦点在设备间共享，离开应用时将自动关闭。

import {
  Field,
  FieldContent,

选择卡片

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

import {
  Field,
  FieldContent,

禁用

将 disabled 属性添加到 Switch 组件以禁用开关。将 data-disabled 属性添加到 Field 组件以进行样式设置。

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

无效状态

将 aria-invalid 属性添加到 Switch 组件以表示无效状态。将 data-invalid 属性添加到 Field 组件以进行样式设置。

您必须接受条款和条件才能继续。

import {
  Field,
  FieldContent,

尺寸 (Size)

使用 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 参考

请参阅 Radix Switch 文档。