Form controls

RadioGroup

A managed set of radio options bound to a single value. Use this when you have a static option list and want a built-in legend, hint, and error message: for ad-hoc layouts use individual Radio components instead.

Basic

Plan

Free engine No license key needed

+ Email One paid plugin

All plugins Every plugin, at the deepest volume bracket

Horizontal

Billing cadence

Monthly Billed on the same day each month.

Yearly Ten months billed for twelve.

Error state

Export format

CSV One row per entry, for a spreadsheet.

JSON Nested fields kept, for another system.

Choose an export format.

Described by text elsewhere

describedBy takes the ids of other elements that explain the group, separated by spaces. A screen reader reads them after the group's own hint or error. Use it when the explanation already sits on the page, such as a note above a form or the message a wrapping Field renders. id sets the fieldset's id, and the hint and the error take theirs from it, for a group another element has to point at.

Visibility covers the project's issues and files as well.

Visibility

Private Only project members can see it.

Public Anyone can see it, and it is listed on your profile.

You can change this later.

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 selected value.
`options` required	`ChoiceOption[]`	no default	Option list.
`label`	`string`	no default	Group legend.
`hint`	`string`	no default	Subdued hint below the group.
`error`	`string`	no default	Error message. Replaces the hint.
`describedBy`	`string`	no default	Ids of other elements that describe the group, separated by spaces, such as a wrapping Field's message. Read after the group's own hint or error.
`id`	`string`	no default	The fieldset's id. The hint and the error take theirs from it. One is generated for the messages when left out.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`name`	`string`	no default	Native form name, auto-generated if omitted.
`required`	`boolean`	`false`	Add a red asterisk to the legend.
`disabled`	`boolean`	`false`	Disable every option in the group.
`onchange`	`(value: string) => void`	no default	Fires when the user changes selection.
`labelHidden`	`boolean`	`false`	Keeps the legend for screen readers and takes it off the screen.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of every option.
`variant`	`'inline' \| 'card'`	`'inline'`	The card variant draws each option as a bordered surface that is its own target.
`class`	`string`	no default	Extra classes on the fieldset.
`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.