---
title: "비녀장"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-30
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS는 기본 HTML 입력을 사용하여 전환합니다. 사용자 정의 색상, 크기, 설정 및 기본 설정 양식에 대한 라벨 지원을 갖춘 접근 가능한 켜기/끄기 스위치입니다."
url: https://frutjam.com/ko/components/toggle
---

# 구성요소 전환

Toggle components are binary switches that allow users to turn features or settings on and off. Built with native HTML checkbox inputs and enhanced with Tailwind CSS animations, toggles provide an intuitive way to control boolean states. The Frutjam toggle system supports multiple colors, sizes, and disabled states—perfect for settings panels, feature flags, and preference controls.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class            | 타입    | Description                  |
| ---------------- | ----- | ---------------------------- |
| toggle           | Base  | Animated on/off switch input |
| toggle-xs        | Size  | Extra small                  |
| toggle-sm        | Size  | Small                        |
| toggle-md        | Size  | Medium (default)             |
| toggle-lg        | Size  | Large                        |
| toggle-xl        | Size  | Extra large                  |
| toggle-primary   | Color | Primary theme color          |
| toggle-secondary | Color | Secondary theme color        |
| toggle-accent    | Color | Accent theme color           |
| toggle-neutral   | Color | Neutral theme color          |
| toggle-info      | Color | Info semantic color          |
| toggle-success   | Color | Success semantic color       |
| toggle-warning   | Color | Warning semantic color       |
| toggle-error     | Color | Error semantic color         |

## Basic Usage

## Toggle Sizes

```html
<input type="checkbox" class="toggle toggle-xs">
<input type="checkbox" class="toggle toggle-sm">
<input type="checkbox" class="toggle toggle-md">
<input type="checkbox" class="toggle toggle-lg">
<input type="checkbox" class="toggle toggle-xl">
```

## Toggle Colors

```html
<input type="checkbox" class="toggle" checked>
<input type="checkbox" class="toggle toggle-primary" checked>
<input type="checkbox" class="toggle toggle-secondary" checked>
<input type="checkbox" class="toggle toggle-accent" checked>
<input type="checkbox" class="toggle toggle-info" checked>
<input type="checkbox" class="toggle toggle-success" checked>
<input type="checkbox" class="toggle toggle-warning" checked>
<input type="checkbox" class="toggle toggle-error" checked>
```

## Disabled Toggle

```html
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>
```

## Toggle with Label

```html
<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-primary" checked>
  <span>Enable notifications</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-success" checked>
  <span>Dark mode</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-warning">
  <span>Analytics</span>
</label>
```

## Toggle States

```html
<div class="flex gap-4 items-center">
  <div>
    <p class="text-sm font-medium mb-2">Off</p>
    <input type="checkbox" class="toggle toggle-primary">
  </div>
  <div>
    <p class="text-sm font-medium mb-2">On</p>
    <input type="checkbox" class="toggle toggle-primary" checked>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Disabled</p>
    <input type="checkbox" class="toggle toggle-primary" disabled>
  </div>
</div>
```