reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Checkbox
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Checkbox

Component

Use labeled checkboxes with descriptions, groups, and an indeterminate state synchronized to the DOM property.

input
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Checkbox, CheckboxGroup } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Basic

서비스 이용을 위해 약관에 동의해주세요.

Sizes

Indeterminate

CheckboxGroup

관심 분야

달콤한 사과

부드러운 바나나

상큼한 오렌지

Horizontal Layout

알림 설정

Usage guidance

Best practices

  • Give every Checkbox in a CheckboxGroup a unique value. A single checkbox's onChange receives a boolean; the group's receives a string array.
  • Use indeterminate for a select-all control when only some items are selected.

Usage to avoid

  • Do not use checkboxes for mutually exclusive choices or expose a checked state without a label.

Usage examples

Multiple-selection group

Checkbox

PropTypeDefaultDescription
labelstring—체크박스 레이블
hintstring—레이블 아래 보조 설명 텍스트
descriptionstring—레이블 아래 설명 텍스트
checkedboolean—제어 모드: 체크 상태
defaultCheckedboolean—비제어 모드: 초기 체크 상태
onChange(checked: boolean) => void—상태 변경 핸들러
size"sm" | "md" | "lg""md"체크박스 크기
valuestring—CheckboxGroup 내에서 사용할 값
indeterminatebooleanfalse불확정 상태 표시 (마이너스 아이콘)

CheckboxGroup

PropTypeDefaultDescription
valuestring[]—제어 모드: 선택된 값 배열
defaultValuestring[][]비제어 모드: 초기 선택 값 배열
onChange(value: string[]) => void—선택 변경 핸들러
orientation"horizontal" | "vertical""vertical"레이아웃 방향
labelstring—그룹 레이블

컴포넌트 의존 관계

깊이
▲ USED BY (7)settings-formdata-tabletask-listfilter-barform-wizardcolumn-togglerwebhook-configCheckbox
View test results

테스트 커버리지

2026년 7월 9일12/12 통과
12성공
0실패
12전체
  • label을 렌더링한다
  • description을 렌더링한다
  • description을 aria-describedby로 연결한다
  • label 없이 aria-label만 있어도 description을 aria-describedby로 연결한다
  • indeterminate 상태를 네이티브 checkbox 속성으로 노출한다
  • indeterminate prop 변경을 네이티브 checkbox 속성에 동기화한다
  • indeterminate 클릭은 checked=true 변경으로 전달한다
  • 클릭 시 체크 상태가 변경된다
  • disabled 상태를 지원한다
  • size prop을 지원한다
  • error 메시지를 표시한다
  • required prop이 RequiredMark를 표시한다

Related components

opt-ui

Select

Core

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

opt-ui

Combobox

Core

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

opt-ui

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

opt-ui

Input

Core

Use a standalone text input with labels, errors, hints, and icons.

opt-ui

Switch

Core

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

opt-ui

Textarea

Core

Enter multiline text with the same label, error, and hint API as Input.

PreviousCardNextRadioGroup