Checkboxes
Checkboxes allow users to select one or more options from a list.
1<x-checkbox label="I want to receive news and updates" />Sizes
You can change the size of the checkboxes by using the size attribute.
1<x-checkbox size="sm" label="Size SM" />2<x-checkbox size="md" label="Size MD" />3<x-checkbox 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-checkbox label="I want to receive news and updates" description="We will send you emails about new products and promotions." />Description Only
You can show a checkbox with only a description by omitting the label.
I have read and agree to the terms and conditions.
1<x-checkbox description="I have read and agree to the terms and conditions." />Disabled State
You can disable the checkbox by using the disabled attribute.
We will send you emails about new products and promotions.
1<x-checkbox disabled label="I want to receive news and updates" description="We will send you emails about new products and promotions." />Reversed Label
You can reverse the label and the checkbox by using the reverse attribute.
1<x-checkbox reverse label="Reverse Checkbox" />2<x-checkbox label="Normal Checkbox" />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-checkbox.group label="Newsletter" hint="Choose the newsletters you want to subscribe to.">
2 <x-checkbox label="News" description="We will send you emails about new products, which are released." />3 <x-checkbox checked label="Promotions" description="We will send you emails about promotions, which are currently running." />4 <x-checkbox label="Blog" description="We will send you emails about new blog posts, which are published." />5</x-checkbox.group> Horizontal Group
Group checkboxes together horizontally to allow users to select multiple options.
Choose the newsletters you want to subscribe to.
1<x-checkbox.group label="Newsletter" horizontal hint="Choose the newsletters you want to subscribe to.">
2 <x-checkbox label="News" />3 <x-checkbox checked label="Promotions" />4 <x-checkbox label="Blog" />5 <x-checkbox label="Events" />6 <x-checkbox label="Webinars" />7 <x-checkbox label="Podcasts" />8</x-checkbox.group>