Radios
Radios let users pick exactly one option from a list.
1<x-radio label="I want to receive news and updates" />Sizes
You can change the size of the radios by using the size attribute.
1<x-radio name="r-size" size="sm" label="Size SM" />2<x-radio name="r-size" size="md" label="Size MD" />3<x-radio name="r-size" size="lg" label="Size LG" />Description
You can add a description to the radio by using the description attribute.
We will send you emails about new products and promotions.
1<x-radio label="I want to receive news and updates" description="We will send you emails about new products and promotions." />Disabled State
You can disable the radio by using the disabled attribute.
We will send you emails about new products and promotions.
1<x-radio disabled label="I want to receive news and updates" description="We will send you emails about new products and promotions." />Read-Only State
The readonly attribute gives the radio the muted look of read-only inputs and adds readonly to the <input>.
Set by your organization.
1<x-radio name="r-readonly" readonly checked label="Monthly billing" description="Set by your organization." />2<x-radio name="r-readonly" readonly label="Yearly billing" />Vertical Group
Group radios with <x-radio.group> so users choose one option of the group.
Choose the newsletters you want to subscribe to.
We will send you emails about new products, which are released.
We will send you emails about promotions, which are currently running.
We will send you emails about new blog posts, which are published.
1<x-radio.group label="Newsletter" hint="Choose the newsletters you want to subscribe to.">
2 <x-radio name="newsletter_1" value="1" label="News" description="We will send you emails about new products, which are released." />3 <x-radio name="newsletter_1" value="2" checked label="Promotions" description="We will send you emails about promotions, which are currently running." />4 <x-radio name="newsletter_1" value="3" label="Blog" description="We will send you emails about new blog posts, which are published." />5</x-radio.group> Horizontal Group
Lay the group out horizontally for short lists of options.
Choose the newsletters you want to subscribe to.
1<x-radio.group label="Newsletter" horizontal hint="Choose the newsletters you want to subscribe to.">
2 <x-radio name="newsletter_2" label="News" />3 <x-radio name="newsletter_2" checked label="Promotions" />4 <x-radio name="newsletter_2" label="Blog" />5 <x-radio name="newsletter_2" label="Events" />6 <x-radio name="newsletter_2" label="Webinars" />7 <x-radio name="newsletter_2" label="Podcasts" />8</x-radio.group>