Checkbox
Checkboxes allow users to select one or more items from a set, or to toggle an option on or off.
Checkboxes can be used to turn an option on or off, or to select multiple values from a list. Material Blade provides a checkbox component that follows Material Design guidelines.
<x-mbc::checkbox />
<x-mbc::checkbox checked />Basic
The basic checkbox component can be used with minimal setup. By default, the checkbox is unchecked. You can control the checked state using the checked attribute.
<x-mbc::checkbox />
<x-mbc::checkbox checked />With Label
You can add a label to the checkbox using the label attribute. The label will be displayed next to the checkbox.
<x-mbc::checkbox label="Option 1" />
<x-mbc::checkbox label="Option 2" checked />
<x-mbc::checkbox label="Option 3" />Colors
Checkboxes support different colors from the Material Design theme. You can set the color using the color attribute. The default color is primary.
<x-mbc::checkbox label="Primary (default)" color="primary" checked />
<x-mbc::checkbox label="Secondary" color="secondary" checked />
<x-mbc::checkbox label="Error" color="error" checked />
<x-mbc::checkbox label="Warning" color="warning" checked />
<x-mbc::checkbox label="Info" color="info" checked />
<x-mbc::checkbox label="Success" color="success" checked />Indeterminate State
A checkbox can be in an indeterminate state, which is useful for showing a partial selection. Use the indeterminate attribute to set this state.
This state is commonly used in parent checkboxes when some (but not all) of their child checkboxes are selected.
<x-mbc::checkbox label="Select All" indeterminate />
<x-mbc::checkbox label="Item 1" checked />
<x-mbc::checkbox label="Item 2" />
<x-mbc::checkbox label="Item 3" />Disabled State
Checkboxes can be disabled using the disabled attribute. A disabled checkbox cannot be interacted with.
<x-mbc::checkbox label="Disabled Unchecked" disabled />
<x-mbc::checkbox label="Disabled Checked" checked disabled />
<x-mbc::checkbox label="Disabled Indeterminate" indeterminate disabled />Properties
mbc::checkbox
| Name | Type | Default | Description |
|---|---|---|---|
checked
|
bool
|
false
|
If true, the checkbox will be checked. |
color
|
string
|
primary
|
The color of the checkbox. Supports theme colors (primary, secondary, error, warning, info, success) or any valid CSS color. |
disabled
|
bool
|
false
|
If true, the checkbox will be disabled. |
indeterminate
|
bool
|
false
|
If true, the checkbox will be in an indeterminate state. |
label
|
string
|
|
The label text for the checkbox. |
name
|
string
|
|
Name attribute for the checkbox input. |
value
|
string
|
|
Value attribute for the checkbox input. |