Library · Forms & CTAs

Radio

Simple radio button field for use within forms and fieldsets; radios sharing a name form a group.

Live preview — edit theme bottom-right

---
import Radio from "../components/primitives/forms/Radio.astro";
---
<Radio name="plan" label="Monthly" value="monthly" checked />
<Radio name="plan" label="Yearly" value="yearly" />

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the radio button field container
`id`	`string`	—	Unique identifier for the radio button field
`name`	`string`	Yes	Name attribute for the radio button field (shared within group)
`label`	`string`	Yes	Label text for the radio button field
`value`	`string`	Yes	Value attribute for the radio button (required for radio groups)
`checked`	`boolean`	—	Whether the radio button is checked by default
`disabled`	`boolean`	—	Whether the field is disabled (default: false)
`[key: string]`	`any`	—	HTML attributes

Example with all props

<Radio
  class="contact-radio"
  id="contact-email"
  name="contact-method"
  label="Email"
  value="email"
  checked
  disabled={false}
/>
<Radio name="contact-method" label="Phone" value="phone" />