Radios
Checkboxes allow users to select one or more options from a list.
1<x-radio label="I want to receive news and updates" />Sizes
You can change the size of the checkboxes 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 checkbox 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 checkbox 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." />Vertical Group
Group checkboxes together to allow users to select multiple options.
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
Group checkboxes together horizontally to allow users to select multiple 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>