CheckBox Primitive

Primitive CheckBox는 kit 스타일 없이 root context, label 연결, checkbox input을 제공합니다.

Usage

tsx

import {
  CheckBox,
  CheckBoxLabel,
  CheckBoxIndicator,
} from '@suis-ui/primitives';

권장 primitive 구조는 CheckBox root 안에 label과 indicator를 조합하는 형태입니다.

text

CheckBox
├── CheckBoxLabel
└── CheckBoxIndicator
    └── input[type="checkbox"]

tsx

<CheckBox as="div" id="terms">
  <CheckBox.Label>I accept the terms</CheckBox.Label>
  <CheckBox.Indicator />
</CheckBox>

Props

이름	타입	기본값	간단한 설명
`id`	`string`	`createUniqueId()`	`CheckBoxIndicator`와 `CheckBoxLabel`이 공유하는 input id입니다. Root DOM id로는 전달되지 않습니다.
`rootId`	`string`	`-`	Root element에 적용할 DOM id입니다.
`as`	`T`	`div`	Root로 렌더링할 element 또는 component입니다.
`children`	`JSX.Element`	`-`	Checkbox label, indicator, custom content를 배치합니다.
선택한 element props	`Omit<ComponentProps<T>, 'id' \| 'children'>`	`-`	`id`와 `children`을 제외한 props가 root element로 전달됩니다.

Component

`CheckBox.Label`

Checkbox context의 id에 바인딩된 for를 가진 label을 렌더링합니다.

이름	타입	기본값	간단한 설명
`children`	`JSX.Element`	`-`	Label 안에 렌더링할 내용입니다.
label HTML attributes	`Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, 'for'>`	`-`	`for`를 제외한 label attribute입니다. `for`는 context id로 고정됩니다.

`CheckBox.Indicator`

Checkbox context의 id에 바인딩된 input type="checkbox"를 렌더링하고, 그 뒤에 children을 렌더링합니다.

이름	타입	기본값	간단한 설명
`children`	`JSX.Element`	`-`	Input 뒤에 렌더링할 custom indicator나 보조 content입니다.
input HTML attributes	`Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' \| 'id'>`	`-`	`type`과 `id`를 제외한 input attribute입니다. `type`은 `checkbox`, `id`는 context id로 고정됩니다.

참고

레이아웃과 시각적 indicator 렌더링을 완전히 제어해야 할 때 이 primitive를 사용하세요. 스타일이 적용된 버전은 @suis-ui/kit의 CheckBox를 사용하세요.

Examples

Basic Checkbox

tsx

<CheckBox id="newsletter">
  <CheckBox.Indicator />
  <CheckBox.Label>Receive newsletter</CheckBox.Label>
</CheckBox>

Root Element Id

tsx

<CheckBox as="div" id="terms-input" rootId="terms-field">
  <CheckBox.Label>I agree to the terms</CheckBox.Label>
  <CheckBox.Indicator required />
</CheckBox>

Custom Indicator Content

tsx

<CheckBox id="custom-check">
  <CheckBox.Indicator>
    <span aria-hidden="true">Selected</span>
  </CheckBox.Indicator>
  <CheckBox.Label>Use custom indicator content</CheckBox.Label>
</CheckBox>

CheckBox Primitive ​

Usage ​

Props ​

Component ​

CheckBox.Label ​

CheckBox.Indicator ​

참고 ​

Examples ​

Basic Checkbox ​

Root Element Id ​

Custom Indicator Content ​