Skip to content

RadioGroup

Pick one of a few options that all stay visible. Native radios in a fieldset; no JavaScript needed.

FormsServer-rendered

Examples

List

Transport

Most servers use HTTP.

Example
<RadioGroup name="transport" label="Transport" value="http" hint="Most servers use HTTP.">
  <Radio value="http" label="HTTP" />
  <Radio value="sse" label="SSE" />
</RadioGroup>

Cards

Tiles for choices that need a description.

Authentication
Example
<RadioGroup name="auth" label="Authentication" value="oauth" variant="cards" orientation="horizontal">
  <Radio value="oauth" label="OAuth" description="Sign in with the provider in a browser window." />
  <Radio value="bearer" label="Bearer token" description="Send a fixed token in the Authorization header." />
  <Radio value="none" label="None" description="The server is public." />
</RadioGroup>

Error

Who can use this server

Choose who can use this server before saving.

Example
<RadioGroup
  name="scope"
  label="Who can use this server"
  orientation="horizontal"
  required
  error="Choose who can use this server before saving."
>
  <Radio value="me" label="Only me" />
  <Radio value="team" label="My team" />
</RadioGroup>

Usage

Usage
import { RadioGroup, Radio } from '@switchboard/ui'

<RadioGroup name="transport" label="Transport" value={server.transport}>
  <Radio value="http" label="HTTP" />
  <Radio value="sse" label="SSE" />
</RadioGroup>

Props

Every component also takes mix, for css() and mixins applied after its own style.

RadioGroup

RadioGroup props
PropTypeDefaultDescription
name*string–Shared by every Radio inside. Must be unique on the page.
label*RemixNode–Group name, rendered as the <legend>.
hintRemixNode–Help text under the legend, linked with aria-describedby.
errorRemixNode–Error under the options. Sets aria-invalid on the group and each radio.
valuestring–Initially checked value.
requiredboolean–Sets aria-required on the group.
variant'list' | 'cards''list'Cards draws each option as a bordered tile.
orientation'vertical' | 'horizontal''vertical'Options in a row (list) or in columns (cards).
disabledboolean–Disables the fieldset and every radio in it.

Also accepts every <fieldset> attribute. Hint and error ids derive from id, or from `rg-${name}`.

Radio

Radio props
PropTypeDefaultDescription
value*string–Posted when checked.
label*RemixNode–Option text.
descriptionRemixNode–Secondary line under the label.
namestring–Only for a Radio outside a RadioGroup.
checkedboolean–Overrides the group value.

Also accepts every <input> attribute except type.

Accessibility

  • Native radios in a <fieldset> with a <legend>: one tab stop, arrow keys move and select, and the value posts, all without JavaScript.
  • The legend names the group; hint and error are linked to it with aria-describedby.
  • Each option is a <label> around its radio, so the whole row or tile is clickable.

Guidance

Do

  • Use for two to five options that benefit from being seen together.
  • Preselect the most common option when there is a safe default.

Don’t

  • Wrap a RadioGroup in a Field.
  • Use radios for options that can be combined; use checkboxes.