CheckboxGroup - OLUN. Design System

값 모델: value/defaultValue string[] · onValueChange(string[])
표현: appearance plain · card, columns one · two · three
접근성 기준: role=group + aria-label/aria-labelledby + Checkbox children

기본 그룹

compound · multi-select

코드 보기tsx

import { Checkbox, CheckboxGroup } from "@olundot/ui";

export function NotificationChannels() {
  return (
    <CheckboxGroup
      aria-label="알림 채널"
      name="channels"
      defaultValue={["email"]}
    >
      <Checkbox value="email" description="시험 시작 10분 전에 발송합니다.">이메일</Checkbox>
      <Checkbox value="sms">문자</Checkbox>
      <Checkbox value="push" disabled>앱 푸시</Checkbox>
    </CheckboxGroup>
  );
}

선택 전 그룹

defaultValue 생략, 선택 전 상태

코드 보기tsx

import { Checkbox, CheckboxGroup } from "@olundot/ui";

export function EmptyNotificationChannels() {
  return (
    <CheckboxGroup aria-label="알림 채널" name="channels-empty">
      <Checkbox value="email" description="시험 시작 10분 전에 발송합니다.">이메일</Checkbox>
      <Checkbox value="sms">문자</Checkbox>
      <Checkbox value="push" disabled>앱 푸시</Checkbox>
    </CheckboxGroup>
  );
}

카드형

appearance=card · columns

코드 보기tsx

import { Checkbox, CheckboxGroup } from "@olundot/ui";

export function ResourceChecklist() {
  return (
    <CheckboxGroup
      aria-label="시험 자료"
      name="resources"
      appearance="card"
      columns="two"
      defaultValue={["formula"]}
    >
      <Checkbox value="formula" description="공식표 제공">공식표</Checkbox>
      <Checkbox value="calculator" description="계산기 허용">계산기</Checkbox>
    </CheckboxGroup>
  );
}