Select one or multiple options from a set.
<flux:checkbox wire:model="terms" label="I agree to the terms and conditions" />Organize a list of related checkboxes vertically.
When using checkbox groups, you can add wire:model to the group element or the individual checkboxes.
<flux:checkbox.group wire:model="notifications" label="Notifications"> <flux:checkbox label="Push notifications" value="push" checked /> <flux:checkbox label="Email" value="email" checked /> <flux:checkbox label="In-app alerts" value="app" /> <flux:checkbox label="SMS" value="sms" /></flux:checkbox.group>Align descriptions for each checkbox directly below its label.
<flux:checkbox.group wire:model="subscription" label="Subscription preferences"> <flux:checkbox checked value="newsletter" label="Newsletter" description="Receive our monthly newsletter with the latest updates and offers." /> <flux:checkbox value="updates" label="Product updates" description="Stay informed about new features and product updates." /> <flux:checkbox value="invitations" label="Event invitations" description="Get invitations to our exclusive events and webinars." /></flux:checkbox.group>Organize a group of related checkboxes horizontally.
<flux:fieldset> <flux:legend>Languages</flux:legend> <flux:description>Choose the languages you want to support.</flux:description> <div class="flex gap-4 *:gap-x-2"> <flux:checkbox checked value="english" label="English" /> <flux:checkbox checked value="spanish" label="Spanish" /> <flux:checkbox value="french" label="French" /> <flux:checkbox value="german" label="German" /> </div></flux:fieldset>Control a group of checkboxes with a single checkbox.
|
|
Name
|
|---|---|
|
|
Caleb Porzio |
|
|
Hugo Sainte-Marie |
|
|
Keith Damiani |
<flux:checkbox.group> <flux:checkbox.all /> <flux:checkbox checked /> <flux:checkbox /> <flux:checkbox /></flux:checkbox.group>Prevent users from interacting with and modifying a checkbox.
<flux:checkbox disabled />A bordered alternative to standard checkboxes.
<flux:checkbox.group wire:model="subscription" label="Subscription preferences" variant="cards" class="max-sm:flex-col"> <flux:checkbox checked value="newsletter" label="Newsletter" description="Get the latest updates and offers." /> <flux:checkbox value="updates" label="Product updates" description="Learn about new features and products." /> <flux:checkbox value="invitations" label="Event invitations" description="Invitatations to exclusive events." /></flux:checkbox.group>You can swap between vertical and horizontal card layouts by conditionally applying flex-col based on the viewport.
<flux:checkbox.group ... class="max-sm:flex-col"> <!-- ... --></flux:checkbox.group>You can arrange a set of checkbox cards vertically by simply adding the flex-col class to the group container.
<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col"> <flux:checkbox checked value="newsletter" label="Newsletter" description="Get the latest updates and offers." /> <flux:checkbox value="updates" label="Product updates" description="Learn about new features and products." /> <flux:checkbox value="invitations" label="Event invitations" description="Invitatations to exclusive events." /></flux:checkbox.group>You can arrange a set of checkbox cards vertically by simply adding the flex-col class to the group container.
<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col"> <flux:checkbox checked value="newsletter" icon="newspaper" label="Newsletter" description="Get the latest updates and offers." /> <flux:checkbox value="updates" icon="cube" label="Product updates" description="Learn about new features and products." /> <flux:checkbox value="invitations" icon="calendar" label="Event invitations" description="Invitatations to exclusive events." /></flux:checkbox.group>You can compose your own custom cards through the flux:checkbox component slot.
<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col"> <flux:checkbox checked value="newsletter"> <flux:checkbox.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Newsletter</flux:heading> <flux:subheading size="sm">Get the latest updates and offers.</flux:subheading> </div> </flux:checkbox> <flux:checkbox value="updates"> <flux:checkbox.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Product updates</flux:heading> <flux:subheading size="sm">Learn about new features and products.</flux:subheading> </div> </flux:checkbox> <flux:checkbox value="invitations"> <flux:checkbox.indicator /> <div class="flex-1"> <flux:heading class="leading-4">Event invitations</flux:heading> <flux:subheading size="sm">Invitatations to exclusive events.</flux:subheading> </div> </flux:checkbox></flux:checkbox.group>