Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Forms.switch

Server-rendered

Renders a switch control with optional label content.

Basic switch 

  <.switch id="marketing" checked={true}>Email updates</.switch>

Disabled 

  <.switch id="notifications" disabled={true}>Push notifications</.switch>

With FormField

Phoenix shim 
  <.switch field={@form[:notifications]} />

With label attr (inline)

Phoenix shim 
  <.switch field={@form[:notifications]} label="Enable notifications" />

With inner_block (takes precedence over label attr)

Phoenix shim 
  <.switch field={@form[:notifications]}>
  Enable <strong>push</strong> notifications
</.switch>

With explicit errors

Phoenix shim 
  <.switch field={@form[:notifications]} errors={["is required"]} />

Inside field composition

Phoenix shim 
  <.field>
  <:label for={@form[:notifications].id}>Notifications</:label>
  <.switch field={@form[:notifications]} />
</.field>

Attributes

Name Type Default Values Global Includes
checked :boolean false — —
class :string — — —
disabled :boolean false — —
errors :list — — —
field {:struct, Phoenix.HTML.FormField} — — —
id :string — — —
label :string — — —
name :string — — —
rest :global — — —
size :atom :default :sm , :default —
value :string "true" — —

Slots

Slot Slot Attributes
inner_block —