Switch

A pill-shaped boolean toggle rendered as a native checkbox with field-aware error handling.

Airplane mode

<.switch></.switch>

Examples

Default

Off and on states side by side.

Notifications off Notifications on

<div class="flex flex-col gap-3">
  <span class="flex items-center gap-2">
    <.switch field={Phoenix.Component.to_form(%{"active" => false})[:active]} />
    <span class="text-sm">Notifications off</span>
  </span>
  <span class="flex items-center gap-2">
    <.switch field={Phoenix.Component.to_form(%{"active" => true})[:active]} />
    <span class="text-sm">Notifications on</span>
  </span>
</div>

Show code

Disabled

Pass the disabled global to prevent interaction.

Always on (locked)

<span class="flex items-center gap-2">
  <.switch field={Phoenix.Component.to_form(%{"active" => true})[:active]} disabled />
  <span class="text-sm text-muted-foreground">Always on (locked)</span>
</span>

Props

Name	Type	Default	Values
class	:string
field	{:struct, Phoenix.HTML.FormField}
rest	:global