Components
Layouts

Checkbox

Select one or multiple options from a set.

I agree to the terms and conditions

Checkbox group

Organize a list of related checkboxes vertically.

When using checkbox groups, you can add wire:model to the group element or the individual checkboxes.

Notifications
Push notifications
Email
In-app alerts
SMS

With descriptions

Align descriptions for each checkbox directly below its label.

Subscription preferences
Newsletter Receive our monthly newsletter with the latest updates and offers.
Product updates Stay informed about new features and product updates.
Event invitations Get invitations to our exclusive events and webinars.

Horizontal fieldset

Organize a group of related checkboxes horizontally.

Languages Choose the languages you want to support.
English
Spanish
French
German

Check-all

Control a group of checkboxes with a single checkbox.

Name
Caleb Porzio
Hugo Sainte-Marie
Keith Damiani

Checked

Mark a checkbox as checked by default.

Enable notifications

Disabled

Prevent users from interacting with and modifying a checkbox.

Read and write

Checkbox cards

A bordered alternative to standard checkboxes.

Subscription preferences
Newsletter
Get the latest updates and offers.
Product updates
Learn about new features and products.
Event invitations
Invitatations to exclusive events.

You can swap between vertical and horizontal card layouts by conditionally applying flex-col based on the viewport.

Vertical cards

You can arrange a set of checkbox cards vertically by simply adding the flex-col class to the group container.

Subscription preferences
Newsletter
Get the latest updates and offers.
Product updates
Learn about new features and products.
Event invitations
Invitatations to exclusive events.

Cards with icons

You can arrange a set of checkbox cards vertically by simply adding the flex-col class to the group container.

Subscription preferences
Newsletter
Get the latest updates and offers.
Product updates
Learn about new features and products.
Event invitations
Invitatations to exclusive events.

Custom card content

You can compose your own custom cards through the flux:checkbox component slot.

Subscription preferences
Newsletter
Get the latest updates and offers.
Product updates
Learn about new features and products.
Event invitations
Invitatations to exclusive events.
Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie