SEED Design

Switch

사용자가 개별 옵션을 켜거나 끌 수 있게 해주는 컴포넌트입니다. 일반적으로 특정 설정을 활성화하거나 비활성화하는 데 사용됩니다.

import { Switch } from "seed-design/ui/switch";

export default function SwitchPreview() {
  return <Switch defaultChecked />;
}

Installation

npx @seed-design/cli@latest add ui:switch

Props

Switch

Prop

Type

SwitchMark

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>
  );
}

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

On this page

Installation
Props
Switch
SwitchMark
Examples
Sizes
Tones
Brand
Neutral
Long Label
Disabled
Using SwitchMark