切换

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add switch
Copy

用法

🌐 Usage

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

Copy<Switch />

示例

🌐 Examples

描述

🌐 Description

import {
  Field,
  FieldContent,

选择卡

🌐 Choice Card

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

🌐 Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

import {
  Field,
  FieldContent,

已禁用

🌐 Disabled

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

🌐 Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

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

无效

🌐 Invalid

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

🌐 Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

import {
  Field,
  FieldContent,

大小

🌐 Size

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

🌐 Use the size prop to change the size of the switch.

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

请参阅 Radix Switch 文档。

🌐 See the Radix Switch documentation.