Components

Component

Checkbox

Multi-select checkbox item and group with labels, helper text, and error state.

ReactReact Native8 props
PreviewReact
관심 설정

필요한 알림만 선택할 수 있어요.

Imports

import { Checkbox, CheckboxGroup, Checkmark } from "@hozorica/hods-react/checkbox";
import { Checkbox, CheckboxGroup, Checkmark } from "@hozorica/hods-react-native/checkbox";

Props

PropTypeDescription
checked / defaultCheckedbooleanControlled and uncontrolled selection.
onCheckedChange(checked) => voidCalled when the checkbox toggles.
labelReactNodeVisible item label.
sizemedium | largeControl and label density.
variantsquare | ghostVisible checkmark treatment.
tonebrand | neutralSelected mark tone.
indeterminatebooleanShows the mixed state mark.
errorMessageReactNodeCheckboxGroup error text and invalid propagation.

Platform Support

React

Native checkbox input wrapped by label, with controlled/uncontrolled, indeterminate, group error propagation, and mark-only rendering.

React Native

Pressable checkbox with matching visible API and accessibility state.

Usage

<CheckboxGroup label="관심 설정"><Checkbox label="채팅 알림" defaultChecked /></CheckboxGroup>

Notes

  • Use CheckboxGroup when the set has a shared label, helper, or error.
  • Use Checkmark only for custom item layouts.