CheckboxGroup

Data Input

여러 항목을 함께 선택하는 체크박스 그룹.

Usage

복수 선택 체크박스 묶음 — 그룹 라벨·배치 방향을 함께 다룰 때. 낱개면 Checkbox

import

import { CheckboxGroup } from '@mildang/design-system/Checkbox';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

CheckboxGroup Props

Prop

Type

Default

defaultValue

string[] & (string | number | readonly string[])

지정 안 함

disabled

boolean

지정 안 함

name

string

지정 안 함

onValueChange

(value: string[]) => void

지정 안 함

orientation

"horizontal" | "vertical"

vertical

panda

SystemStyleObject

지정 안 함

required

boolean

지정 안 함

size

"sm" | "md"

value

string[]

지정 안 함

같은 패밀리

@mildang/design-system/Checkbox 에서 같이 내보내는 컴포넌트다.

Checkbox

하나 이상의 항목을 선택·해제하는 체크박스.

예제

기본 사용

여러 항목을 함께 고르는 그룹입니다. 선택값은 배열이고 자식을 넣지 않으면 빈 상자로 렌더됩니다.

코드

Open in Playground

import { Checkbox, CheckboxGroup } from '@mildang/design-system/Checkbox';

/** CheckboxGroup는 선택 항목을 children으로 구성해야 화면에 보인다. */
export default function CheckboxGroupBasicExample() {
  return (
    <CheckboxGroup defaultValue={['attendance']} aria-label="알림 설정">
      <Checkbox value="attendance" label="출결 알림" />
      <Checkbox value="report" label="주간 리포트" />
      <Checkbox value="notice" label="공지사항" />
    </CheckboxGroup>
  );
}

크기

size 는 그룹에서 한 번만 지정하고 자식이 상속받습니다 — 자식마다 따로 주면 줄 간격이 어긋납니다.

코드

Open in Playground

import { Checkbox, CheckboxGroup } from '@mildang/design-system/Checkbox';
import { HStack } from '@mildang/styled-system/jsx';

export default function CheckboxGroupSizesExample() {
  return (
    <HStack gap="24" alignItems="flex-start">
      <CheckboxGroup size="sm" defaultValue={['sm']} aria-label="작은 크기">
        <Checkbox value="sm" label="Small" />
        <Checkbox value="sm-2" label="Option" />
      </CheckboxGroup>
      <CheckboxGroup size="md" defaultValue={['md']} aria-label="중간 크기">
        <Checkbox value="md" label="Medium" />
        <Checkbox value="md-2" label="Option" />
      </CheckboxGroup>
    </HStack>
  );
}

가로 방향

그룹 orientation을 horizontal로 지정한 예제입니다.

코드

Open in Playground

import { Checkbox, CheckboxGroup, type CheckboxGroupProps } from '@mildang/design-system/Checkbox';

export default function CheckboxGroupHorizontalLayoutExample(props: CheckboxGroupProps = {}) {
  return (
    <CheckboxGroup {...{ orientation: 'horizontal' as const, ...props }} defaultValue={['opt2']}>
      <Checkbox value="opt1" label="Option 1" />
      <Checkbox value="opt2" label="Option 2" />
      <Checkbox value="opt3" label="Option 3" />
    </CheckboxGroup>
  );
}

비활성 그룹

그룹 disabled로 모든 자식 항목을 비활성화합니다.

코드

Open in Playground

import { Checkbox, CheckboxGroup, type CheckboxGroupProps } from '@mildang/design-system/Checkbox';

export default function CheckboxGroupDisabledStateExample(props: CheckboxGroupProps = {}) {
  return (
    <CheckboxGroup {...{ disabled: true, ...props }} defaultValue={['opt1', 'opt3']}>
      <Checkbox value="opt1" label="Option 1" />
      <Checkbox value="opt2" label="Option 2" />
      <Checkbox value="opt3" label="Option 3" />
    </CheckboxGroup>
  );
}

비활성 그룹 (실사용 예시)

출결 알림 설정처럼 이미 정해진 값을 고정으로 보여주며 그룹 전체를 비활성화한 실사용 형태입니다.

코드

import { Checkbox, CheckboxGroup } from '@mildang/design-system/Checkbox';

export default function CheckboxGroupDisabledExample() {
  return (
    <CheckboxGroup disabled defaultValue={['attendance']} aria-label="비활성 알림 설정">
      <Checkbox value="attendance" label="출결 알림" />
      <Checkbox value="report" label="주간 리포트" />
    </CheckboxGroup>
  );
}