Form controls

CheckboxGroup

A managed set of checkboxes bound to an array of values, with a legend, a hint and an error message for the set as a whole. It renders a real fieldset, so the group is announced as a group rather than as loose controls. For one standalone box use Checkbox.

Basic

The bound array is ordered by options and not by click order, so ticking the third option and then the first submits the same value as ticking them the other way round.

Token scopes

Read

Write

Delete Cannot be undone.

A token with no scope can read nothing.

Value: ["read"]

The same options as RadioGroup

RadioGroup declares the same ChoiceOption shape, so one option list drives either control. The only difference is what the value is: an array of every chosen value here, a single value there.

Notify me on

Email Sent from your own SMTP relay.

Push Browser and mobile.

Chat Posted to a webhook.

Value: ["email"]

Primary channel

Email Sent from your own SMTP relay.

Push Browser and mobile.

Chat Posted to a webhook.

Value: "email"

Horizontal, as cards

Deploy to

Europe

North America

Asia Pacific

Error state

Confirm before deleting

I have a backup

I know this cannot be undone

Tick at least one.

Under a touch screen

Each option takes a 44px target of its own. The options sit far enough apart that no two targets overlap, in a column and in a horizontal row that wraps, so a tap near the bottom of one option never picks the option below it. Options drawn as cards keep their spacing, and a mouse keeps the tighter list.

API

Prop	Type	Default	Description
`value`	`string[]`	`[]`	Bindable chosen values, ordered by options rather than by click order.
`options` required	`ChoiceOption[]`	no default	The option list.
`label` required	`string`	no default	The group legend. Required, because an unnamed group announces as a bare set of controls.
`labelHidden`	`boolean`	`false`	Keep the legend for screen readers and take it off the screen.
`hint`	`string`	no default	Subdued hint below the group.
`error`	`string`	no default	Error message. Replaces the hint.
`name`	`string`	no default	Native form name shared by every option. Generated when omitted.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Lay the options out down a column or across a row.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Scale of the box, the icon slot and the label.
`variant`	`'inline' \| 'card'`	`'inline'`	Card draws a bordered option whose whole surface is the target.
`required`	`boolean`	`false`	Add a red asterisk to the legend.
`disabled`	`boolean`	`false`	Disable every option in the group.
`class`	`string`	no default	Extra classes on the fieldset.
`onchange`	`(value: string[]) => void`	no default	Fires on every toggle, with the whole new array.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.

ChoiceOption

Prop	Type	Default	Description
`value` required	`string`	no default	The submitted value, and the key the option renders under.
`label` required	`string`	no default	Names this one choice. The group is named by the legend.
`description`	`string`	no default	A second line under the label.
`icon`	`Component`	no default	A lucide component, drawn before the label. The group sizes it.
`disabled`	`boolean`	`false`	Block this option alone. A disabled group blocks every option.