CheckBox Primitive

Primitive CheckBox provides root context, label wiring, and a checkbox input without kit styling.

Usage

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

The recommended primitive structure composes a label and indicator inside the CheckBox root.

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

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

Props

Name	Type	Default	Description
id	string	createUniqueId()	Input id shared by CheckBoxIndicator and CheckBoxLabel. It is not forwarded as the root DOM id.
rootId	string	-	DOM id applied to the root element.
as	T	div	Element or component rendered as the root.
children	JSX.Element	-	Checkbox label, indicator, and custom content.
Selected element props	Omit<ComponentProps<T>, 'id' | 'children'>	-	Props forwarded to the root element except id and children.

Component

CheckBox.Label

Renders a label with for bound to the checkbox context id.

Name	Type	Default	Description
children	JSX.Element	-	Content rendered inside the label.
Label HTML attributes	Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, 'for'>	-	Label attributes except for. for is fixed to the context id.

CheckBox.Indicator

Renders an input type="checkbox" with id bound to the checkbox context id, followed by children.

Name	Type	Default	Description
children	JSX.Element	-	Custom indicator or supporting content rendered after the input.
Input HTML attributes	Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id'>	-	Input attributes except type and id. type is fixed to checkbox, and id is fixed to the context id.

Notes

Use this primitive when you need full control over layout and visual indicator rendering. Use CheckBox from @suis-ui/kit for the styled version.

Examples

Basic Checkbox

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

Root Element Id

<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

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