StellarUI

<stellar-radio>

Standalone native radio control with shared field metadata and browser grouping through matching `name` values.

Properties

Preview

Starter

Team

Enterprise

Markup

Copy

<stellar-radio
  label="Starter"
  description="Choose one plan."
  name="plan"
  value="starter"
  checked
>
  <stellar-radio-item checked>Starter</stellar-radio-item>
  <stellar-radio-item>Team</stellar-radio-item>
  <stellar-radio-item>Enterprise</stellar-radio-item>
</stellar-radio>

API

Complete props, events, slots, and implementation notes for the shipped radio control.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`label`	`string`	`''`
`description`	`string`	`''`
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`name`	`string`	`''`
`value`	`string`	`on`

Events

Event	Source	Notes
`change`	host	Redispatched from the inner native radio when selection changes.

Slots

Slot	Notes
`label`	Optional label content. Overrides the `label` prop when present.
`description`	Optional helper copy below the control. Overrides the `description` prop when present.

Notes

The shipped control is currently a standalone `stellar-radio`, not `stellar-radio-group` plus `stellar-radio-item`.
It stays backed by a real native `<input type="radio">`, so browser grouping still comes from matching `name` values across sibling radios.
The example keeps the three radio options hard-coded so the properties panel stays focused on component props rather than example authoring.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native radio for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
`checked`, `disabled`, `name`, and `value` mirror native radio semantics on the host.
The host redispatches `change` so outer Datastar listeners can treat it like a normal form control.