Concorde UI component — Radio. sonic-radio is a round Checkbox in radio mode: radios sharing a name under one formDataProvider store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot Doc ID: core/components/ui/form/radio/radio. Keywords: Concorde, supersoniks, core/components/ui/form/radio/radio, radio, Radio, UI component, form, sonic-radio, web component, name, formDataProvider, label, description, size, md, checked, disabled, status. URL: https://concorde.supersoniks.org/core/components/ui/form/radio.

Radio

sonic-radio is a round Checkbox in radio mode: radios sharing a name under one formDataProvider store a single value, and a checked radio cannot be unchecked by a click. Label goes in the default slot or label, helper text in the description slot.

Basic example

<div formDataProvider="radio-basic-demo" class="grid gap-2">
      <sonic-radio name="seat" value="window" checked>Window</sonic-radio>
      <sonic-radio name="seat" value="aisle">Aisle</sonic-radio>
      <div>Seat: <sonic-value dataProvider="radio-basic-demo" key="seat"></sonic-value></div>
    </div>

Size

With no size, the radio follows md (1rem).

<div class="grid gap-2" formDataProvider="radio-size-demo">
      <sonic-radio name="size" value="2xs" size="2xs">2xs</sonic-radio>
      <sonic-radio name="size" value="xs" size="xs">xs</sonic-radio>
      <sonic-radio name="size" value="sm" size="sm">sm</sonic-radio>
      <sonic-radio name="size" value="md">Default</sonic-radio>
      <sonic-radio name="size" value="lg" size="lg">lg</sonic-radio>
      <sonic-radio name="size" value="xl" size="xl">xl</sonic-radio>
      <sonic-radio name="size" value="2xl" size="2xl">2xl</sonic-radio>
    </div>

Checked and disabled

checked sets the initial state. disabled blocks interaction and dims the control.

<div class="grid gap-2">
      <sonic-radio name="state-checked" value="a" checked>Checked</sonic-radio>
      <sonic-radio name="state-disabled" value="b" disabled>Disabled</sonic-radio>
      <sonic-radio name="state-both" value="c" disabled checked>Disabled and checked</sonic-radio>
      <sonic-radio name="state-link" value="d">I accept the <sonic-link href="#" class="underline">terms</sonic-link></sonic-radio>
    </div>

Filtering a list

The radio group writes one status value to the store used as dataFilterProvider by a sonic-queue. See Checkbox for the multi-value version.

API reference

Attribute	Values	Description
`name`	string	Key in the form data (dot notation supported)
`value`	string	Value stored when checked
`formDataProvider`	string	Form data id; inherited from the closest ancestor when omitted
`checked`	boolean	Initial checked state
`unsetOnDisconnect`	boolean	Removes the value from the data when the element is removed
`label`	string (HTML)	Label, rendered before the default slot
`description`	string (HTML)	Helper text, rendered in the `description` slot
`size`	`2xs` … `2xl` · `inherit` (default `md`)	Font size and control size
`disabled`	boolean	Blocks interaction
`required`	boolean	Native validation on form submit
`autofocus`	boolean	Focuses the input on load
`data-aria-label` · `data-aria-labelledby`	string	Forwarded to the inner input as `aria-label` / `aria-labelledby`

Slot	Description
(default)	Label content (text, links)
`description`	Helper text under the label

Fires a change event on each click.