Radio
Sourcecomponents/Radio.astro
Overview
Five states — default, hover, checked, focus and disabled — on light, dark & image. Radios in a set share a name; picking one clears the rest. For yes/no use Checkbox.
On light
default
hover
checked
focus
disabled
On dark
default
hover
checked
focus
disabled
On image
default
hover
checked
focus
disabled
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | — | Required. Give every Radio in a set the same name. |
value | string | — | Required. Submitted value when picked. |
checked | boolean | false | Selected by default. |
disabled | boolean | false | Dims and blocks the control. |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
Usage
Wrap a set in a <fieldset> with a <legend>. Every option shares one name.
<fieldset>
<legend>Billing</legend>
<Radio name="billing" value="monthly" checked>Monthly</Radio>
<Radio name="billing" value="yearly">Yearly</Radio>
</fieldset>