Toggle

Toggle

켜짐(On) 또는 꺼짐(Off) 상태를 갖는 두 가지 상태의 버튼 컴포넌트예요.

출처: 문서

본문

누르면 켜짐/꺼짐이 토글되는 버튼 컴포넌트예요. 키보드 내비게이션을 완전히 지원하고 제어/비제어 방식 모두 사용할 수 있어요.

Features

  • 완전한 키보드 내비게이션.
  • 제어(controlled)/비제어(uncontrolled) 방식 모두 지원.

Anatomy

컴포넌트를 임포트해요.

import { Toggle } from "radix-ui";

export default () => <Toggle.Root />;

API Reference

Root

토글 자체예요.

Prop Type Default
asChild boolean false
defaultPressed boolean No default value
pressed boolean No default value
onPressedChange function No default value
disabled boolean No default value
Data attribute Values
[data-state] "on" | "off"
[data-disabled] Present when disabled

Accessibility

키보드 상호작용

Key Description
Space Activates/deactivates the toggle.
Enter Activates/deactivates the toggle.

더 알아보기 (Learn more)

  • 누름(pressed) 상태는 pressed/defaultPressed prop과 [data-state]("on"/"off") 속성으로 관리해요.
  • Toggle은 단일 버튼, ToggleGroup은 버튼 그룹이라는 점만 다를 뿐 동작이 유사해요.