Model and states

<Checkbox label="Model: {$checkbox ? 'true' : 'false'}" model="$checkbox" />
<Checkbox label="Disabled" disabled="true" checked="true" />
<Checkbox label="Checked" checked="true" />
<Checkbox label="Unchecked" />


<Checkbox label="Warning" color="warning" checked="true" />
<Checkbox label="Success" color="success" checked="true" />
<Checkbox label="Error" color="error" checked="true" />
<Checkbox label="Secondary" color="secondary" checked="true" />
<Checkbox label="Primary" color="primary" checked="true" />
<Checkbox label="Info" color="info" checked="true" />
<Checkbox label="Tertiary" color="tertiary" checked="true" />
<Checkbox label="Accent" color="accent" checked="true" />

Multiple choices

Binding model to an array:

Checked names: ["John"]
public array $selected = ["John"];
<Checkbox label="Mike" value="Mike" model="$selected" color="success" />
<Checkbox label="John" value="John" model="$selected" color="error" />
<Checkbox label="Felix" value="Felix" model="$selected" color="secondary" />
<div>Checked names: {json_encode($selected)}</div>