125k

Switch

PreviousNext

ユーザーが選択状態と未選択状態を切り替えられるコントロール。

BaseRadixReact Aria
import { Label } from "@/components/ui/radix/label"
import { Switch } from "@/components/ui/radix/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/radix/field"
import { Switch } from "@/components/ui/radix/switch"

無効な状態

aria-invalid プロパティを Switch コンポーネントに追加して、無効な状態を示します。スタイル設定のために data-invalid プロパティを Field コンポーネントに追加します。

続行するには利用規約に同意する必要があります。

import {
  Field,
  FieldContent,

サイズ

size プロパティを使用してスイッチのサイズを変更します。

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

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

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

"use client"

import * as React from "react"

API リファレンス

詳細については、Radix UI Switch ドキュメントを参照してください。