Switch

특정 옵션이나 설정을 켜거나 끌 수 있도록 돕는 토글 컴포넌트입니다.

Installation

npx @seed-design/cli add ui:switch

Usage

설치한 snippet은 compound 구성 요소를 한데 묶은 Switch와 본체만 필요할 때 쓰는 Switchmark를 함께 export 합니다.

import { Switch } from "@/components/ui/switch";

export function App() {
  return <Switch label="알림 받기" defaultChecked />;
}

Controlled 모드는 checked와 onCheckedChange를 함께 전달합니다.

import { useState } from "@lynx-js/react";
import { Switch } from "@/components/ui/switch";

export function ControlledSwitch() {
  const [checked, setChecked] = useState(false);
  return <Switch label={checked ? "On" : "Off"} checked={checked} onCheckedChange={setChecked} />;
}

Label 없이 본체만 쓰고 싶다면 Switchmark를 사용합니다.

import { Switchmark } from "@/components/ui/switch";

export function App() {
  return <Switchmark size="24" tone="brand" defaultChecked />;
}

Tone / Size

Switch와 Switchmark는 snippet API에서 tone, size를 그대로 전달받습니다.

import { Switch, Switchmark } from "@/components/ui/switch";

export function SwitchVariants() {
  return (
    <>
      <Switch label="브랜드 스위치" tone="brand" size="32" defaultChecked />
      <Switchmark tone="brand" size="24" defaultChecked />
    </>
  );
}

Props

`Switch`

Prop

Type

label?React.ReactNode

defaultChecked?boolean | undefined

onCheckedChange?((checked: boolean) => void) | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

`Switchmark`

Prop

Type

className?string | undefined

style?CSSProperties | undefined

defaultChecked?boolean | undefined

onCheckedChange?((checked: boolean) => void) | undefined

웹 버전과의 차이

Lynx Switch는 React Switch와 다음과 같은 차이가 있습니다.

이벤트 핸들링: onChange 대신 onCheckedChange만 노출합니다. tap 핸들러는 Switch 내부에서 소유합니다.
렌더링 요소: HTML <label> / <input> 대신 네이티브 <view> / <text> 요소를 렌더링합니다.
Compound 구조: Switch.Root → Switch.Control → Switch.Thumb / Switch.Label 구성과 Context로 상태/variant를 공유하는 흐름은 동일합니다. Control에 tone/size를 직접 전달해 Root를 override 하는 것도 지원합니다.
ref forwarding: 모든 서브 컴포넌트는 React.forwardRef를 지원합니다.

Lynx 미지원 기능

현재 Lynx 플랫폼 제약으로 다음 기능이 지원되지 않습니다.

런타임 모델 차이로 제외

기능	웹 대응	설명
`SwitchHiddenInput`	`<input type="checkbox">`	Lynx에 HTML form 제출 모델 없음
`name` / `value` / `required` / `invalid`	form field props	Lynx에 native form 제출 모델 없음
`focus` / `focusVisible`	키보드 포커스	Lynx에 키보드 포커스 개념 없음
`onChange` (raw DOM event)	`React.ChangeEvent`	의미 없음. `onCheckedChange`로 대체

추후 CSS 지원 시 추가 예정

기능	웹 대응	설명
`active` (pressed) 모디파이어	`data-active`	`switchmark` recipe CSS에 pressed 상태가 정의되면 활성화

Switch

Manual Installation

On this page