Components

Checkbox

Native checkboxes for independent choices.

Preview

Send me product updatesUnavailable option

Usage

import { Checkbox, Label } from '@fwenthehunter/friendly-ui';

<Label className="flex items-center gap-2">
  <Checkbox name="updates" defaultChecked />
  Send me product updates
</Label>

Uses a native checkbox. Click the label or press Space while focused to toggle. Checked named controls participate in FormData. Unchecked and disabled controls are omitted by the browser.

Use defaultChecked for an uncontrolled field; checked and onChange require a client wrapper. For a group, use a fieldset with a legend. Indeterminate state is a DOM property and can be set through a ref in a client wrapper.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`defaultChecked`	boolean	false
`checked`	boolean (controlled)	—
`name / value`	native form props	—