Toggle
토글 컴포넌트는 사용자가 두 가지 상태(켜짐/꺼짐) 사이를 전환할 수 있는 스위치 형태의 UI 요소입니다. 주로 설정을 활성화하거나 비활성화하는 데 사용되며, 상태의 변경이 즉시 적용될 때 사용합니다.
인터랙티브 예제
아래 UI에서 다양한 속성을 직접 변경하여 Toggle 컴포넌트의 모습을 확인해보세요.
sizeselect
Toggle의 크기
checkedboolean
Toggle의 체크 여부
disabledboolean
Toggle의 비활성화 여부
기본 사용법
import { Toggle } from '@ncds/ui-admin';
function App() {
return <Toggle />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'md' | 토글의 크기를 지정합니다. |
| checked | boolean | false | 토글의 현재 상태를 지정합니다. |
| text | string | '' | 토글 옆에 표시될 텍스트입니다. |
| supportText | string | '' | 텍스트 아래에 표시될 부가 설명 텍스트입니다(text가 true일 경우만 표시). |
| disabled | boolean | false | 비활성화 여부를 지정합니다. |
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | - | 토글 상태 변경 시 호출되는 함수입니다. |
| className | string | - | 추가 클래스를 지정합니다. |
상세 예제 (Detailed Examples)
크기 (Size)
상태 (State)
텍스트 (Text)
부가 설명 텍스트 (supportText)
비활성화 (Disabled)
이벤트 핸들링 (Event Handling)
조합 사용 예제 (Combined Examples)