Wishlist Dizzy

Switch

New

Overview

An on/off control with labels, descriptions, semantic colors, size options, and Phoenix form integration.

Receive updates when someone replies to your topics.

Receive a summary of forum activity each Monday.

HEEx 
<.form for={@form}>
  <div class="grid gap-4">
    <Switch.switch
      field={@form[:notifications]}
      label="Notifications"
      sublabel="Recommended"
      description="Receive updates when someone replies to your topics."
    />
    <Switch.switch
      field={@form[:weekly_digest]}
      label="Weekly digest"
      description="Receive a summary of forum activity each Monday."
    />
  </div>
</.form>

Sizes

Choose a size that fits the layout, using larger switches on touch-oriented surfaces.

HEEx 
<.form for={@form}>
  <div class="grid gap-4">
    <Switch.switch field={@form[:compact_notifications]} label="Small" size={:sm} />
    <Switch.switch field={@form[:notifications]} label="Medium" />
    <Switch.switch field={@form[:touch_notifications]} label="Large" size={:lg} />
  </div>
</.form>

Colors

Choose a semantic color for the enabled state.

HEEx 
<.form for={@form}>
  <div class="grid gap-4">
    <Switch.switch field={@form[:primary_notifications]} label="Primary" />
    <Switch.switch field={@form[:information_notifications]} label="Information" color={:info} />
    <Switch.switch field={@form[:success_notifications]} label="Success" color={:success} />
    <Switch.switch field={@form[:warning_notifications]} label="Warning" color={:warning} />
    <Switch.switch field={@form[:danger_notifications]} label="Danger" color={:danger} />
  </div>
</.form>

Disabled

Switches with disabled set and their hidden input elements are omitted from form submissions.

This notification option is unavailable on the current plan.

HEEx 
<.form for={@form}>
  <Switch.switch
    field={@form[:premium_notifications]}
    label="Premium notifications"
    sublabel="Upgrade required"
    description="This notification option is unavailable on the current plan."
    disabled
  />
</.form>

Errors

When bound with field, validation errors render beneath the switch.

must be enabled

HEEx 
<.form for={@form}>
  <Switch.switch field={@form[:notifications]} label="Required notifications" />
</.form>

Add this module

terminal 
mix dizzy.add switch

Component API

Switch.switch

Attributes

Attributes for Switch.switch
NameTypeDefault Values
checked :boolean false—
checked_value :string "true"—
class :any nil—
color :atom :primary:primary, :info, :success, :warning, :danger
description :string nil—
disabled :boolean false—
errors :list []—
field {:struct, Phoenix.HTML.FormField} nil—
id :string nil—
label :string nil—
name :string nil—
required :boolean false—
rest :global nil—
size :atom :md:sm, :md, :lg
sublabel :string nil—
unchecked_value :string "false"—

Explore Dizzy