Switch - krdscn/ui

알림 받기 (꺼짐)

알림 받기 (켜짐)

비활성화 스위치

examples/krds/switch-demo.tsx

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

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/switch.json

Share across devices

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

examples/krds/switch-description.tsx

import {
  Field,
  FieldContent,

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

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.

examples/krds/switch-choice-card.tsx

import {
  Field,
  FieldContent,

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

Disabled

examples/krds/switch-disabled.tsx

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

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.

Accept terms and conditions

You must accept the terms and conditions to continue.

examples/krds/switch-invalid.tsx

import {
  Field,
  FieldContent,

Small

Default

examples/krds/switch-sizes.tsx

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

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

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

examples/krds/switch-rtl.tsx

"use client"

import * as React from "react"