Checkbox

Checkboxes toggle independent options on or off. Use them when each choice is unrelated and more than one can be selected.

Try it

Usage

Wrap a checkbox in RuiField with RuiLabel for consistent spacing and error display. Bind checked for controlled state.

import { RuiCheckbox } from '@ecopages/radiant-ui/checkbox';
import { RuiField } from '@ecopages/radiant-ui/field';
import { RuiLabel } from '@ecopages/radiant-ui/label';
 
<RuiField name="newsletter">
  <RuiLabel>Email me product updates</RuiLabel>
  <RuiCheckbox checked={subscribed} value="yes" />
</RuiField>Copy

Custom markup

<rui-checkbox> coordinates any light-DOM tree that matches its query contract. The RuiCheckbox helper stamps these targets; it is not required.

import '@ecopages/radiant-ui/checkbox';
 
<rui-checkbox checked value="yes">
  <label class="rui-checkbox">
    <input
      type="checkbox"
      data-ref="input"
      data-rui-control
      data-rui-control-type="boolean"
      class="rui-checkbox__input"
    />
    <span class="rui-checkbox__control" aria-hidden="true"></span>
    <span class="rui-checkbox__label">Email me product updates</span>
  </label>
</rui-checkbox>Copy

BEM classes are presentation-only. The host syncs checked, indeterminate, disabled, value, name, and aria-checked on [data-ref="input"].

Indeterminate selections

Set indeterminate when a parent checkbox represents a partially selected group. Clear indeterminate once the user makes an explicit choice.

Related components

For multiple related options as one form field, use a checkbox group. For mutually exclusive choices, use a radio group.

Wire through RuiField

Pass name on RuiField so the checkbox participates in RuiForm validation and submission.

Theming

Checkbox chrome maps to semantic surface roles, never Tailwind palette steps:

Label text uses on-background. Override roles at the theme layer, not in component CSS.

Accessibility

• Every checkbox needs a visible label; use RuiLabel or aria-label.
• Indeterminate state is exposed with aria-checked="mixed".
• Disabled checkboxes should include context explaining why the option is unavailable.

API

RuiCheckbox renders a <label> and native <input type="checkbox"> inside the coordinating <rui-checkbox> custom element. Use the JSX view or compose equivalent marked-up light DOM; the browser owns activation and Space-to-toggle.

Attributes (<rui-checkbox>)

Light-DOM contract

Do not fight host-owned input state. Nested hosts: none.

Events

View helpers

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles