Maskowlabs Logo Maskowlabs

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." />

Read-Only State

The readonly attribute gives the box the muted look of read-only inputs and adds readonly to the <input>.

Required for all admin accounts.
Managed by your organization. 
1<x-checkbox readonly checked label="Security alerts" description="Required for all admin accounts." />
2<x-checkbox readonly label="Product news" description="Managed by your organization." />

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>