Switch

두 가지 상태를 전환하는 네이티브 폼 스위치입니다. 키보드 조작과 폼 제출을 지원합니다.

import { Switch } from 'sud-ui';

사용할 때

두 가지 상태를 전환할 때

사용예제

Basic Usage

기본적인 사용 방법입니다.

Disabled

비활성화 상태의 스위치입니다.

With Text & Icon

스위치의 텍스트와 아이콘을 커스텀할 수 있습니다.

import React, { useState } from 'react';
import { Switch } from 'sud-ui';
import { Check, Close } from 'sud-icons';

const TextIconSwitch = () => {
  const [textChecked, setTextChecked] = useState(false);
  const [iconChecked, setIconChecked] = useState(false);

  return (
    <div className="flex flex-col gap-[20px]">
      <Switch
        checked={textChecked}
        onChange={setTextChecked}
        onText="On"
        offText="Off"
      />
      <Switch
        checked={iconChecked}
        onChange={setIconChecked}
        onText={<Check size={14} />}
        offText={<Close size={14} />}
      />
    </div>
  );
};

export default TextIconSwitch;

sm

md

lg

Size

스위치의 크기를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Switch, Radio, Card } from 'sud-ui';

const SizeSwitch = () => {
  const [checked, setChecked] = useState(false);
  const [size, setSize] = useState('md');

  const sizeOptions = [
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={sizeOptions}
            direction="horizontal"
            value={size}
            onChange={setSize}
          />
        </div>
      </Card>
      <div>
        <Switch
          size={size}
          checked={checked}
          onChange={setChecked}
        />
      </div>
    </div>
  );
};

export default SizeSwitch;

Color Customization

스위치의 색상을 커스텀할 수 있습니다.

import React, { useState } from 'react';
import { Switch } from 'sud-ui';

const ColorSwitch = () => {
  const [checked, setChecked] = useState(true);

  return (
    <div className="flex flex-col gap-[20px]">
      <Switch
        checked={checked}
        onChange={setChecked}
        onColor="forest-5"
        offColor="forest-3"
      />
      <Switch
        checked={checked}
        onChange={setChecked}
        colorType="secondary"
      />
    </div>
  );
};

export default ColorSwitch;

Thumb Customization

스위치의 썸네일을 커스텀할 수 있습니다.

import React, { useState } from 'react';
import { Switch } from 'sud-ui';
import { Check, Close } from 'sud-icons';

const ThumbSwitch = () => {
  const [thumbColorChecked, setThumbColorChecked] = useState(false);
  const [thumbIconChecked, setThumbIconChecked] = useState(false);

  return (
    <div className="flex flex-col gap-[20px]">
      <Switch
        checked={thumbColorChecked}
        onChange={setThumbColorChecked}
        thumbColor="sky-3"
      />
      <Switch
        checked={thumbIconChecked}
        onChange={setThumbIconChecked}
        onIcon={<Check size={14} />}
        offIcon={<Close size={14} />}
      />
    </div>
  );
};

export default ThumbSwitch;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

checked

스위치의 현재 상태 (제어 컴포넌트)

boolean

false

defaultChecked

스위치의 초기 상태 (비제어 컴포넌트)

boolean

false

onChange

상태가 변경될 때 호출되는 함수

(checked: boolean) => void

-

disabled

비활성화 여부

boolean

false

onColor

켜진 상태의 배경색(palette값 또는 HEX code)

string

-

offColor

꺼진 상태의 배경색(palette값 또는 HEX code)

string

-

onText

켜진 상태의 텍스트

string

-

offText

꺼진 상태의 텍스트

string

-

onIcon

켜진 상태의 아이콘

ReactNode

-

offIcon

꺼진 상태의 아이콘

ReactNode

-

shadow

그림자 크기

none

|

sm

|

md

|

lg

md

size

스위치의 크기

sm

|

md

|

lg

md

colorType

스위치의 색상 타입

default

|

primary

|

success

|

warning

|

danger

|

info

|

red

|

rose

|

coral

|

orange

|

volcano

|

apricot

|

yellow

|

gold

|

amber

|

green

|

lime

|

mint

|

blue

|

sky

|

cerulean

|

indigo

|

cobalt

|

navy

|

purple

|

plum

|

orchid

|

forest

|

sage

|

warm-gray

|

cool-gray

|

neutral

|

text

|

ghost

primary

className

추가 클래스명

string

-

style

추가 스타일

CSSProperties

{}

id

고유 ID

string

-

ariaLabel

접근성 레이블

string

-

name

폼 필드 이름

string

-

value

선택된 상태에서 제출할 폼 값

string | number

"on"

required

네이티브 필수 입력 여부

boolean

false

ref

내부 HTMLInputElement에 전달되는 ref

Ref<HTMLInputElement>

-

Soon UI Design

Switch

사용할 때

사용예제

사용 방법

개인정보 처리방침

서비스 약관