# Checkbox Select one or multiple options from a set. ```blade I agree to the terms and conditions ``` ## Checkbox group Organize a list of related checkboxes vertically. > [!TIP] > When using checkbox groups, you can add `wire:model` to the group element or the individual checkboxes. ```blade ``` ## With descriptions Align descriptions for each checkbox directly below its label. ```blade ``` ## Horizontal fieldset Organize a group of related checkboxes horizontally. ```blade Languages Choose the languages you want to support.
``` ## Check-all Control a group of checkboxes with a single checkbox. ```blade ``` ## Checked Mark a checkbox as checked by default. ```blade ``` ## Disabled Prevent users from interacting with and modifying a checkbox. ```blade ``` ## Checkbox cards A bordered alternative to standard checkboxes. ```blade ``` You can swap between vertical and horizontal card layouts by conditionally applying `flex-col` based on the viewport. ```blade ``` ## Vertical cards You can arrange a set of checkbox cards vertically by simply adding the `flex-col` class to the group container. ```blade ``` ## Cards with icons You can arrange a set of checkbox cards vertically by simply adding the `flex-col` class to the group container. ```blade ``` ## Custom card content You can compose your own custom cards through the `flux:checkbox` component slot. ```blade
Newsletter Get the latest updates and offers.
Product updates Learn about new features and products.
Event invitations Invitatations to exclusive events.
``` ## Pills Compact, rounded checkboxes that look like tags or badges. Perfect for filters, categories, and any time you want lightweight selectable options. ```blade ``` ## Buttons Button-style checkbox options that look like a toolbar. Perfect for toggle controls and feature selections where you want a more prominent visual style. ```blade ``` ## Related - [Switch](https://fluxui.dev/components/switch) - Toggle switches for selecting one or multiple options - [Radio](https://fluxui.dev/components/radio) - Radio button controls for selecting one option from many - [Field](https://fluxui.dev/components/field) - Structured form field with label and validation states ## Reference ### flux:checkbox **Prop:** - `wire:model` - Binds the checkbox to a Livewire property. See the [wire:model documentation](https://livewire.laravel.com/docs/wire-model) for more information. - `label` - Label text displayed next to the checkbox. When provided, wraps the checkbox in a structure with an adjacent label. - `description` - Help text displayed below the checkbox. When provided alongside `label`, appears between the label and checkbox. - `value` - Value associated with the checkbox when used in a group. When the checkbox is checked, this value will be included in the array returned by the group's `wire:model`. - `checked` - Sets the checkbox to be checked by default. - `indeterminate` - Sets the checkbox to an indeterminate state, represented by a dash instead of a checkmark. Useful for "select all" checkboxes when only some items are selected. - `disabled` - Prevents user interaction with the checkbox. - `invalid` - Applies error styling to the checkbox. **Attribute:** - `data-flux-checkbox` - Applied to the root element for styling and identification. - `data-checked` - Applied when the checkbox is checked. - `data-indeterminate` - Applied when the checkbox is in an indeterminate state. ### flux:checkbox.group **Prop:** - `wire:model` - Binds the checkbox group to a Livewire property. The value will be an array of the selected checkboxes' values. See the [wire:model documentation](https://livewire.laravel.com/docs/wire-model) for more information. - `label` - Label text displayed above the checkbox group. When provided, wraps the group in a `flux:field` component with an adjacent `flux:label` component. - `description` - Help text displayed below the group label. When provided alongside `label`, appears between the label and the checkboxes. - `variant` - Visual style of the group. Options: `default`, `cards` (Pro), `pills` (Pro), `buttons` (Pro). - `disabled` - Prevents user interaction with all checkboxes in the group. - `invalid` - Applies error styling to all checkboxes in the group. **Slot:** - `default` - The checkboxes to be grouped together. Can include `flux:checkbox`, `flux:checkbox.all`, and other elements. ### flux:checkbox.all A special checkbox that controls all checkboxes within its group. It becomes checked when all checkboxes are checked, unchecked when none are checked, and indeterminate when some (but not all) are checked. **Prop:** - `label` - Text label displayed next to the checkbox. - `description` - Help text displayed below the checkbox. - `disabled` - Prevents user interaction with the checkbox.