Toggle Group

미리보기

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

사용법

관련 표시 모드나 필터를 그룹화하세요. multiple=true면 여러 항목이, 아니면 최대 한 항목이 눌립니다. 단일 모드에서도 값은 항상 배열입니다.

폼이 정확히 하나의 선택을 요구하면 RadioGroup을 사용하세요. 눌린 상태는 aria-selected가 아닌 aria-pressed가 전달하게 하세요. 시각적 레이아웃에 맞춰 orientation을 설정하세요.

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

구성

named ToggleGroup(role=group) → Toggle(value) items

키보드와 접근성

그룹은 단일 Tab 정지점입니다. 화살표 키, Home, End는 포커스만 이동합니다. Enter나 Space는 포커스된 항목을 선택합니다. 비활성 항목은 건너뜁니다. RTL에서는 DirectionProvider와 DOM dir을 모두 설정하세요.

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

예시 코드

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

import { ToggleGroup, Toggle } from '@surflane/ui'

<ToggleGroup aria-label='Log source' value={source} onValueChange={setSource}>
  <Toggle value='live'>Live</Toggle>
  <Toggle value='simulation'>Simulation</Toggle>
</ToggleGroup>
<ToggleGroup
  multiple
  aria-label='Visible log details'
  defaultValue={['requests']}
>
  <Toggle value='requests'>Requests</Toggle>
  <Toggle value='errors'>Errors</Toggle>
</ToggleGroup>

주요 API

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

관련 토큰