Segmented control

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 기간, 거래 방향, 정렬처럼 짧은 옵션 2~5개 중 값 하나를 고르세요. 값은 배열이 아니라 문자열입니다. aria-label로 묶음의 이름을 붙이세요.
• 세그먼트 하나는 늘 골라져 있고, 다시 눌러도 그대로입니다. required={false}면 고른 세그먼트를 다시 눌러 필터처럼 선택을 풀 수 있고, 값은 null이 됩니다.
• width='fill'은 시트에서처럼 트랙을 컨테이너 너비로 늘리고 세그먼트가 너비를 나눕니다. 세그먼트는 CSS 전용 .surf-control-group과 같아서 React가 없는 페이지와도 맞습니다.

• 콘텐츠 패널을 바꿀 때는 Tabs를, 폼이 제출하는 선택에는 RadioGroup을, 서로 독립인 옵션 여러 개에는 ToggleGroup을 쓰세요.
• 세그먼트를 5개보다 많이 두거나 레이블을 길게 쓰지 마세요. 대신 Select를 쓰세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root(role=group, named) → Item(value) buttons

키보드와 접근성

• 묶음은 Tab 정지점 하나입니다. 화살표 키, Home, End로 포커스를 옮기고, Enter나 Space로 포커스된 세그먼트를 고릅니다.
• 각 세그먼트는 눌렸는지를 알리는 버튼입니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { SegmentedControl } from '@surflane/ui'

<SegmentedControl.Root aria-label='Period' value={period} onValueChange={setPeriod}>
  <SegmentedControl.Item value='1d'>1D</SegmentedControl.Item>
  <SegmentedControl.Item value='1w'>1W</SegmentedControl.Item>
  <SegmentedControl.Item value='1m'>1M</SegmentedControl.Item>
</SegmentedControl.Root>

<SegmentedControl.Root
  aria-label='Sentiment'
  required={false}
  value={filter}
  onValueChange={setFilter}
>
  <SegmentedControl.Item value='positive'>Positive</SegmentedControl.Item>
  <SegmentedControl.Item value='negative'>Negative</SegmentedControl.Item>
</SegmentedControl.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰