콘텐츠로 건너뛰기
1.6k

스위치

알림, 다크 모드, 기능 플래그 등 설정을 즉시 켜거나 끌 수 있는 토글 버튼으로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.

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

스위치는 켜짐/꺼짐 두 상태 토글입니다. 뒤집는 즉시 적용되며 제출 버튼은 없습니다. Base UI Switch 프리미티브를 기반으로 하며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

  • 설정 패널 — 알림, 다크 모드, 자동 재생처럼 즉시 반영되는 환경설정.
  • 기능 플래그 — 베타 기능을 켜거나 월간/연간 결제를 전환합니다.
  • 행 단위 컨트롤 — 폼을 열지 않고 테이블이나 목록에서 항목을 활성화하거나 일시 중지합니다.

설치

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
npx shadcn@latest add https://neobrutalism.com/r/base/switch.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json

다음 의존성을 설치합니다.

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

다음 코드를 복사하여 프로젝트에 붙여넣습니다.

components/ui/switch.tsx
"use client"

import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Switch({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
  size?: "sm" | "default"
}) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      className={cn(
        "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }

임포트 경로를 프로젝트 구성에 맞게 조정합니다.

사용법

import { Switch } from "@/components/ui/switch"
<Switch />

예제

설명

import {
  Field,
  FieldContent,

선택 카드

FieldLabel이 Field 전체를 감싸 클릭 가능한 카드 패턴을 구현하는 카드 형식의 선택입니다.

import {
  Field,
  FieldContent,

비활성화

스위치를 비활성화하려면 Switch 컴포넌트에 disabled prop을 추가합니다. 스타일을 적용하려면 Field 컴포넌트에 data-disabled prop을 추가합니다.

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

잘못된 값

잘못된 상태를 나타내려면 Switch 컴포넌트에 aria-invalid prop을 추가합니다. 스타일을 적용하려면 Field 컴포넌트에 data-invalid prop을 추가합니다.

import {
  Field,
  FieldContent,

크기

size prop을 사용하여 스위치의 크기를 변경합니다.

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

RTL

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성

스위치는 WAI-ARIA Switch 패턴을 따릅니다. role="switch"와 aria-checked가 있는 실제 버튼을 렌더링하고, 주변 폼과 함께 값이 전송되도록 숨겨진 input을 둡니다.

키보드 상호작용:

키동작
Tab / Shift + Tab스위치로 포커스 이동/이탈
Space스위치 전환
Enter스위치 전환

API 참조

Base UI Switch 문서를 참고하세요.