Components

Form Controls

Checkbox, Radio, and Switch — native inputs styled with custom rose marks. Each is keyboard-accessible, label-associated, and self-contained.

Checkbox

Default (unchecked) Checked Indeterminate (mixed) Disabled Disabled, checked Email me about new courses We send at most one update per month. Unsubscribe anytime.

Usage

import { Checkbox } from '@xa/ui';

<Checkbox label="Email me about new courses"
          help="At most one update per month." />
<Checkbox label="Checked" checked />
<Checkbox label="Mixed" indeterminate />

Props

Prop	Type	Default	Description
`id`	`string`	—	Input id; ties help text via aria-describedby
`name`	`string`	—	Form field name
`value`	`string`	—	Submitted value when checked
`checked`	`boolean`	`false`	Initial checked state
`indeterminate`	`boolean`	`false`	Mixed (dash) state; set via tiny script
`disabled`	`boolean`	`false`	Disable the control
`required`	`boolean`	`false`	Mark as required
`label`	`string`	—	Visible label beside the box
`help`	`string`	—	Description shown under the label
`class`	`string`	—	Extra CSS classes

Radio

Group of 3 — shared name="plan"

Solo — single learner Team — up to 10 seats Organisation — unlimited

Disabled option

Usage

import { Radio } from '@xa/ui';

<Radio name="plan" value="solo" label="Solo" checked />
<Radio name="plan" value="team" label="Team" />
<Radio name="plan" value="org"  label="Organisation" />

Props

Prop	Type	Default	Description
`id`	`string`	—	Input id
`name`	`string`	—	Shared name that groups the radios
`value`	`string`	—	Submitted value when selected
`checked`	`boolean`	`false`	Initial selected state
`disabled`	`boolean`	`false`	Disable the control
`required`	`boolean`	`false`	Mark as required
`label`	`string`	—	Visible label beside the dot
`class`	`string`	—	Extra CSS classes

Switch

Off On Disabled (off) Disabled (on)

Usage

import { Switch } from '@xa/ui';

<Switch label="Email notifications" checked />
<Switch label="Beta features" />

Built on a native checkbox with role="switch" — toggle with Space, focus with Tab.

Props

Prop	Type	Default	Description
`id`	`string`	—	Input id
`name`	`string`	—	Form field name
`checked`	`boolean`	`false`	Initial on state
`disabled`	`boolean`	`false`	Disable the control
`label`	`string`	—	Visible label beside the switch
`class`	`string`	—	Extra CSS classes