Switch

Model and states

Model: true

Disabled

Checked

Unchecked

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

Inset and Flat

Regular

Inset

Flat

<SwitchToggle color="error" inset="true" label="Inset" checked="true" />
<SwitchToggle color="error" flat="true" label="Flat" checked="true" />

Colors

Warning

Success

Error

Secondary

Primary

Info

Tertiary

Accent

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

Multiple choices

Binding model to an array:

Mike

John

Felix

Checked names: ["John"]

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