Switch

Switch

체크박스의 대안으로 사용하는 토글 스위치 컴포넌트예요.

출처: 문서

본문

켜짐/꺼짐 같은 이진 상태를 토글할 때 사용하는 스위치예요.

<Switch defaultChecked />

이 컴포넌트는 Switch primitive의 props를 상속받으며, 공통 margin props를 지원해요.

예시 (Examples)

Size

size prop으로 스위치의 크기를 제어할 수 있어요.

<Flex align="center" gap="2">
  <Switch size="1" defaultChecked />

  <Switch size="2" defaultChecked />

  <Switch size="3" defaultChecked />
</Flex>

Variant

variant prop으로 스위치의 시각적 스타일을 제어할 수 있어요.

<Flex gap="2">
  <Flex direction="column" gap="3">
    <Switch variant="surface" />

    <Switch variant="classic" />

    <Switch variant="soft" />
  </Flex>

  <Flex direction="column" gap="3">
    <Switch variant="surface" defaultChecked />

    <Switch variant="classic" defaultChecked />

    <Switch variant="soft" defaultChecked />
  </Flex>
</Flex>

Color

color prop으로 특정 색상을 지정할 수 있어요.

<Flex gap="2">
  <Switch color="indigo" defaultChecked />

  <Switch color="cyan" defaultChecked />

  <Switch color="orange" defaultChecked />

  <Switch color="crimson" defaultChecked />
</Flex>

High-contrast

highContrast prop으로 라이트 모드에서 색 대비를 높일 수 있어요.

<Grid rows="2" gapX="2" gapY="3" display="inline-grid" flow="column">
  <Switch color="indigo" defaultChecked />

  <Switch color="indigo" defaultChecked highContrast />

  <Switch color="cyan" defaultChecked />

  <Switch color="cyan" defaultChecked highContrast />

  <Switch color="orange" defaultChecked />

  <Switch color="orange" defaultChecked highContrast />

  <Switch color="crimson" defaultChecked />

  <Switch color="crimson" defaultChecked highContrast />

  <Switch color="gray" defaultChecked />

  <Switch color="gray" defaultChecked highContrast />
</Grid>

Radius

radius prop으로 특정 둥근 모서리 값을 지정할 수 있어요.

<Flex gap="3">
  <Switch radius="none" defaultChecked />

  <Switch radius="small" defaultChecked />

  <Switch radius="full" defaultChecked />
</Flex>

Alignment

Switch를 Text 안에 구성하면 첫 번째 텍스트 줄과 자동으로 수직 가운데 정렬돼요.

<Flex direction="column" gap="3">
  <Text as="label" size="2">
    <Flex gap="2">
      <Switch size="1" defaultChecked /> Sync settings
    </Flex>
  </Text>

  <Text as="label" size="3">
    <Flex gap="2">
      <Switch size="2" defaultChecked /> Sync settings
    </Flex>
  </Text>

  <Text as="label" size="4">
    <Flex gap="2">
      <Switch size="3" defaultChecked /> Sync settings
    </Flex>
  </Text>
</Flex>

여러 줄 텍스트와도 자동으로 잘 정렬돼요.

Disabled

기본 disabled 속성을 사용해 비활성화된 스위치를 만들 수 있어요.

<Flex direction="column" gap="2">
  <Text as="label" size="2">
    <Flex gap="2">
      <Switch size="1" />
      Off
    </Flex>
  </Text>

  <Text as="label" size="2">
    <Flex gap="2">
      <Switch size="1" defaultChecked />
      On
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex gap="2">
      <Switch size="1" disabled />
      On
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex gap="2">
      <Switch size="1" disabled defaultChecked />
      Off
    </Flex>
  </Text>
</Flex>

더 알아보기 (Learn more)

• 체크박스와 비슷한 이진 선택이지만, 시각적으로 토글 스위치 형태가 필요한 설정 UI에 잘 어울려요.