InlineChoice

A checkbox or a radio with a label and an optional note beside it.

import { InlineChoice } from '@zitdevs/ui';

Examples

Receive the monthly newsletterOne practical guide a month. Unsubscribe at any time.I have read the terms

Radios answer one question, so they sit in a ChoiceGroup:

Contact me by

EmailA reply within one business day.PhoneWeekdays, 9:00 to 18:00.Post

<ChoiceGroup id="contact-by" legend="Contact me by">
  <InlineChoice type="radio" id="contact-by-email" name="contact-by" value="email" label="Email" />
  <InlineChoice type="radio" id="contact-by-phone" name="contact-by" value="phone" label="Phone" />
</ChoiceGroup>

Props

Prop	Type	Default	Notes
type	'checkbox' | 'radio'	'checkbox'
id	string	required
name	string	id	Radios of one group share it.
value	string	'on'	Submitted when chosen.
label	string	required	The control’s name.
description	string	—	Read after the name, as its description.
defaultChecked	boolean	false	checked with onChange holds it instead.
ref	Ref<HTMLInputElement>	—	The input.
className	string	—	Placement, on the row.
anything else	<input> attributes	—	On the input: required, disabled, onChange…

Exported types: InlineChoiceProps.

Accessibility

• The whole row toggles the control, but only the label names it (aria-labelledby); the note is its description, read after the name.
• No error of its own: report it through the ChoiceGroup the options answer.
• The native control draws the kit’s focus ring itself.

Without JavaScript

It needs none: a native checkbox or radio. It renders as a Server Component.

Theming

primary for the control’s own accent colour; ink for the label, muted for the note; the focus ring.