Switch

즉시 적용되는 켬과 끔이다. 저장 버튼 없이 바로 반영되는 설정에 쓴다. 제출이 필요한 동의 항목에는 Checkbox 가 맞다.

import { Switch } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Switch } from "@nui-kit/react/switch";
import "@nui-kit/react/styles/switch.css";   // 온디맨드일 때

기본

label 클릭으로도 토글된다

상태

on · off · disabled · readOnly · error

커스터마이징

--nui-switch--width / --nui-switch--height

상태

기본
checked
isError
checked + isError함께 그린다
disabled
checked + disabled함께 그린다
readOnly
<Switch checked={on} onChange={() => setOn(!on)} />

checked 가 다른 상태와 겹치면 함께 그린다

선택된 채로 에러면 빨강, 비활성이면 회색이다.

접근성

내부는 input[type=checkbox] 에 role="switch" 를 붙인다. 스크린리더가 체크박스가 아니라 스위치로 안내하고 켬과 끔으로 읽는다.

react-hook-form

RHFSwitch 는 /rhf 서브패스에 있다. 스위치 하나가 boolean 필드 하나다. checked · onChange · name 은 RHF 가 소유한다.

{
  "nightAlarm": true,
  "weeklyDigest": false
}
<RHFSwitch control={control} name="nightAlarm" />

설정 화면 — 스위치마다 필드 하나

커스터마이징

트랙 너비와 높이를 CSS 변수로 연다. 자기 치수를 갖는 컴포넌트라 라벨이 길어져도 찌그러지지 않는다.

컴포넌트변수기본값비고
Switch--nui-switch--heightvar(--nui-size-switch-track-h)— · 2자리를 함께 움직인다
--nui-switch--widthvar(--nui-size-switch-track-w)— · 2자리를 함께 움직인다
컴포넌트변수기본값비고
Checkbox · Radio · Switch--nui-selector--border-widthvar(--nui-border-width-1)—
--nui-selector--sizevar(--nui-size-selector)— · 2자리를 함께 움직인다

API

이름타입기본값설명
classNamestring | undefined——
disabledboolean | undefinedfalse—
idstring | undefined——
isErrorbooleanfalse—
readOnlybooleanfalse—

SwitchProps 에서 자동 생성됨 (components/Switch/Switch.tsx). 표준 DOM 속성 303개는 그대로 전달되며 표에서 생략했다.