Segmented Control

서로 다른 값이나 화면 사이를 전환하는 토글 버튼이에요.

출처: 문서

본문

여러 옵션 중 하나를 강조해 보여 주면서 값을 전환할 때 사용하는 세그먼트 컨트롤이에요.

<SegmentedControl.Root defaultValue="inbox">
  <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

  <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

  <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>

이 컴포넌트는 Toggle Group primitive의 props와 기능을 상속받아요. 공통 margin props도 지원해요.

Root

컨트롤의 항목들을 감싸요.

Prop	Type	Default
`disabled`	`boolean`	`false`
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "classic"`	`"surface"`
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	No default value

Item

컨트롤의 각 개별 값을 나타내요.

예시 (Examples)

Size

size prop으로 컨트롤의 크기를 제어할 수 있어요.

<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" size="1">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" size="2">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" size="3">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

Variant

variant prop으로 컨트롤의 시각적 스타일을 제어할 수 있어요.

<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" variant="surface">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" variant="classic">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

Radius

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

<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" radius="none">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="small">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="medium">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="large">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="full">
    <SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>

더 알아보기 (Learn more)

탭처럼 보이지만 라디오처럼 단일 값을 선택하는 UI에 잘 어울리는 컴포넌트예요.