Switch Documentation

Use switch when you want a boolean control that reads more like an on/off setting than a checklist item.

Import

use PUI
# or
import PUI.Input

Basic Usage

Provide label to render the switch and label together.

<.switch
  id="notifications"
  name="notifications"
  label="Enable notifications"
/>

Switch Demo

Enable notifications

Receive product updates

In Settings Screens

Switches work well for preferences and feature flags.

<.switch id="security-alerts" name="security_alerts" label="Security alerts" />
<.switch id="marketing-emails" name="marketing_emails" label="Marketing emails" />

Disabled State

Use disabled when a setting is read-only or temporarily unavailable.

<.switch
  id="beta-access"
  name="beta_access"
  label="Beta access"
  disabled
/>

Disabled Switch Demo

Disabled switch

Errors

Use errors to show validation feedback below the switch.

<.switch
  id="notifications"
  name="notifications"
  label="Enable notifications"
  errors={["Turn this on before continuing."]}
/>

Switch Errors Demo

Enable notifications

Turn this on before continuing.

API Reference

Attributes

Name	Type	Default	Description
`id`	`any`	`nil`	Element ID
`label`	`string`	`nil`	Label text
`field`	`FormField`	`nil`	Phoenix form field
`errors`	`list`	`[]`	Error messages rendered below the switch
`class`	`string`	`""`	Additional CSS classes
`disabled`	`boolean`	`false`	Disable the switch
`name`	`string`	—	Form field name
`value`	`string`	—	Submitted value