React
Switch
특정 설정 및 상태를 즉시 켜거나 끌 수 있도록 하는 컴포넌트입니다.
import { Switch } from "seed-design/ui/switch";
export default function SwitchPreview() {
return <Switch defaultChecked />;
}Installation
npx @seed-design/cli@latest add ui:switchpnpm dlx @seed-design/cli@latest add ui:switchyarn dlx @seed-design/cli@latest add ui:switchbun x @seed-design/cli@latest add ui:switch의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:switch
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import * as React from "react";
import { Switch as SeedSwitch } from "@seed-design/react";
export interface SwitchProps extends SeedSwitch.RootProps {
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
rootRef?: React.Ref<HTMLLabelElement>;
label?: React.ReactNode;
}
/**
* @see https://seed-design.io/react/components/switch
*/
export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
({ inputProps, rootRef, label, ...otherProps }, ref) => {
return (
<SeedSwitch.Root ref={rootRef} {...otherProps}>
<SeedSwitch.Control>
<SeedSwitch.Thumb />
</SeedSwitch.Control>
{label && <SeedSwitch.Label>{label}</SeedSwitch.Label>}
<SeedSwitch.HiddenInput ref={ref} {...inputProps} />
</SeedSwitch.Root>
);
},
);
Switch.displayName = "Switch";
export interface SwitchmarkProps extends SeedSwitch.ControlProps {}
/**
* @see https://seed-design.io/react/components/switch
*/
export const Switchmark = React.forwardRef<HTMLDivElement, SwitchmarkProps>((props, ref) => {
return (
<SeedSwitch.Control ref={ref} {...props}>
<SeedSwitch.Thumb />
</SeedSwitch.Control>
);
});
Switchmark.displayName = "Switchmark";
/**
* @deprecated Use `Switchmark` instead. Will be removed in @seed-design/[email protected].
*/
export const SwitchMark = Switchmark;
/**
* @deprecated Use `SwitchmarkProps` instead. Will be removed in @seed-design/[email protected].
*/
export type SwitchMarkProps = SwitchmarkProps;
/**
* 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.
*/
Props
Switch
Prop
Type
inputProps?React.InputHTMLAttributes<HTMLInputElement> | undefinedrootRef?React.Ref<HTMLLabelElement> | undefinedlabel?React.ReactNodedisabled?boolean | undefinedinvalid?boolean | undefinedrequired?boolean | undefinedchecked?boolean | undefineddefaultChecked?boolean | undefinedonCheckedChange?((checked: boolean) => void) | undefinedSwitchmark
Prop
Type
Examples
Sizes
Deprecated Props
size="medium"과 size="small"은 더 이상 사용되지 않습니다. 대신 size="32"와 size="16"을 사용하세요.
import { VStack } from "@seed-design/react";
import { Switch } from "seed-design/ui/switch";
export default function SwitchSizes() {
return (
<VStack align="center" gap="spacingY.componentDefault">
<Switch size="32" label="32 (default)" defaultChecked />
<Switch size="24" label="24" defaultChecked />
<Switch size="16" label="16" defaultChecked />
</VStack>
);
}Tones
Brand
import { Switch } from "seed-design/ui/switch";
export default function SwitchBrand() {
return <Switch tone="brand" label="Brand" defaultChecked />;
}Neutral
import { Switch } from "seed-design/ui/switch";
export default function SwitchNeutral() {
return <Switch tone="neutral" label="Neutral" defaultChecked />;
}Long Label
import { VStack } from "@seed-design/react";
import { Switch } from "seed-design/ui/switch";
export default function SwitchLongLabel() {
return (
<VStack gap="spacingY.componentDefault">
<Switch
size="32"
label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
/>
<Switch
size="24"
label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
/>
<Switch
size="16"
label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
/>
</VStack>
);
}Disabled
import { VStack } from "@seed-design/react";
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function SwitchDisabled() {
const [disabled, setDisabled] = useState(true);
return (
<VStack gap="x8" align="center">
<VStack align="flex-start" gap="spacingY.componentDefault">
<Switch disabled={disabled} label="Not Checked (Brand)" />
<Switch disabled={disabled} defaultChecked label="Checked (Brand)" />
<Switch disabled={disabled} label="Not Checked (Neutral)" tone="neutral" />
<Switch disabled={disabled} defaultChecked label="Checked (Neutral)" tone="neutral" />
</VStack>
<Switch
size="16"
checked={disabled}
onCheckedChange={setDisabled}
label="Disable switches"
tone="neutral"
/>
</VStack>
);
}Listening to Value Changes
onCheckedChange를 사용하여 스위치의 선택 상태 변경을 감지할 수 있습니다.
이벤트를 활용해야 하는 경우 inputProps를 통해 내부 <input> 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.
import { VStack, Text } from "@seed-design/react";
import { Switch } from "seed-design/ui/switch";
import { useState } from "react";
export default function SwitchValueChanges() {
const [count, setCount] = useState(0);
const [lastValue, setLastValue] = useState<boolean | null>(null);
return (
<VStack gap="x4" align="center">
<Switch
label="Click me"
onCheckedChange={(checked) => {
setCount((prev) => prev + 1);
setLastValue(checked);
}}
/>
<Text>
onCheckedChange called: {count} times, last value: {`${lastValue ?? "-"}`}
</Text>
</VStack>
);
}Use Cases
Using Switchmark
Switchmark는 레이블을 제외한 스위치 컴포넌트로, 커스텀 레이아웃을 위해 사용할 수 있습니다.
import { HStack, Text, VStack } from "@seed-design/react";
import { Switch } from "@seed-design/react/primitive";
import { Switchmark } from "seed-design/ui/switch";
function CustomSwitch({ children, ...props }: Switch.RootProps) {
return (
<VStack asChild gap="x2" align="center">
<Switch.Root {...props}>
<Switchmark />
<Switch.HiddenInput />
{children}
</Switch.Root>
</VStack>
);
}
export default function () {
return (
<HStack gap="x6">
<CustomSwitch>
<Text textStyle="t7Regular">regular</Text>
</CustomSwitch>
<CustomSwitch defaultChecked>
<Text textStyle="t7Medium">medium</Text>
</CustomSwitch>
<CustomSwitch>
<Text textStyle="t7Bold">bold</Text>
</CustomSwitch>
</HStack>
);
}Last updated on