Switch
특정 옵션이나 설정을 켜거나 끌 수 있도록 돕는 토글 컴포넌트입니다.
npx @seed-design/cli add ui:switch
pnpm dlx @seed-design/cli add ui:switch
yarn dlx @seed-design/cli add ui:switch
bun x @seed-design/cli add ui:switch
의존성 설치
npm install @seed-design/lynx-react
yarn add @seed-design/lynx-react
pnpm add @seed-design/lynx-react
bun add @seed-design/lynx-react
아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:switch
* @requires @seed-design/lynx-react@>=0.1.0 <1.0.0
* @requires @seed-design/lynx-css@>=0.1.0 <1.0.0
**/
import * as React from "@lynx-js/react";
import { Switch as SeedSwitch } from "@seed-design/lynx-react";
export interface SwitchProps extends SeedSwitch.RootProps {
label?: React.ReactNode;
}
/**
* @see https://seed-design.io/lynx/components/switch
*/
export const Switch = React.forwardRef<unknown, SwitchProps>(
({ label, children, ...otherProps }, ref) => {
return (
<SeedSwitch.Root ref={ref} {...otherProps}>
<SeedSwitch.Control>
<SeedSwitch.Thumb />
</SeedSwitch.Control>
{label != null ? <SeedSwitch.Label>{label}</SeedSwitch.Label> : null}
{children}
</SeedSwitch.Root>
);
},
);
Switch.displayName = "Switch";
export interface SwitchmarkProps extends Omit<SeedSwitch.RootProps, "children"> {}
/**
* @see https://seed-design.io/lynx/components/switch
*/
export const Switchmark = React.forwardRef<unknown, SwitchmarkProps>((props, ref) => {
return (
<SeedSwitch.Root ref={ref} {...props}>
<SeedSwitch.Control>
<SeedSwitch.Thumb />
</SeedSwitch.Control>
</SeedSwitch.Root>
);
});
Switchmark.displayName = "Switchmark";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
설치한 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 />;
}
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 />
</>
);
}
label?React.ReactNode
defaultChecked?boolean | undefined
onCheckedChange?((checked: boolean) => void) | undefined
style?CSSProperties | undefined
children?React.ReactNode
className?string | undefined
className?string | undefined
defaultChecked?boolean | undefined
onCheckedChange?((checked: boolean) => void) | undefined
style?CSSProperties | 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 플랫폼 제약으로 다음 기능이 지원되지 않습니다.
| 기능 | 웹 대응 | 설명 |
|---|
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로 대체 |
| 기능 | 웹 대응 | 설명 |
|---|
active (pressed) 모디파이어 | data-active | switchmark recipe CSS에 pressed 상태가 정의되면 활성화 |