Checkbox Group

미리보기

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

사용법

한 주제의 여러 선택을 관리하세요. 그룹이 부모 전체 선택 체크박스의 혼합 상태를 구동합니다. 모든 하위 값을 allValues로 전달하세요.

부모 체크박스 상태를 하위와 분리해 저장하지 마세요. 대신 allValues를 하위 값과 동기화하세요.

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

구성

Fieldset → CheckboxGroup(allValues) → parent checkbox + value checkboxes

키보드와 접근성

Tab은 각 체크박스로 이동합니다. Space가 토글합니다. 부모가 모든 항목을 선택하거나 지웁니다. 일부만 선택되면 혼합으로 표시됩니다.

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

예시 코드

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

import { CheckboxGroup, Checkbox, ChoiceLabel } from '@surflane/ui'

<CheckboxGroup
  allValues={['staging', 'production']}
  defaultValue={['staging']}
  aria-label='Environments'
>
  <ChoiceLabel
    control={
      <Checkbox.Root parent>
        <Checkbox.Indicator />
      </Checkbox.Root>
    }
  >
    All environments
  </ChoiceLabel>
  {['staging', 'production'].map((value) => (
    <ChoiceLabel
      key={value}
      control={
        <Checkbox.Root name='environments' value={value}>
          <Checkbox.Indicator />
        </Checkbox.Root>
      }
    >
      {value}
    </ChoiceLabel>
  ))}
</CheckboxGroup>

주요 API

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

관련 토큰