Toggle · shadcn/ui for Phoenix LiveView

Client-only Toggle

No server events. The toggle flips purely via JavaScript — zero latency.

Client-only ToggleGroup

Single and multiple selection modes. No server involvement.

Single (alignment)

Multiple (text formatting)

Outline variant (spacing=0)

<div>
  <p class="mb-2 text-sm font-medium">Single (alignment)</p>
  <.toggle_group id="client-align" type="single" default_value="center">
    <.toggle_group_item value="left">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
    </.toggle_group_item>
    <.toggle_group_item value="center">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="17" x2="7" y1="12" y2="12"/><line x1="19" x2="5" y1="18" y2="18"/></svg>
    </.toggle_group_item>
    <.toggle_group_item value="right">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="21" x2="9" y1="12" y2="12"/><line x1="21" x2="7" y1="18" y2="18"/></svg>
    </.toggle_group_item>
  </.toggle_group>
</div>
<div>
  <p class="mb-2 text-sm font-medium">Multiple (text formatting)</p>
  <.toggle_group id="client-format" type="multiple">
    <.toggle_group_item value="bold">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
    </.toggle_group_item>
    <.toggle_group_item value="italic">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
    </.toggle_group_item>
    <.toggle_group_item value="underline">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
    </.toggle_group_item>
  </.toggle_group>
</div>
<div>
  <p class="mb-2 text-sm font-medium">Outline variant (spacing=0)</p>
  <.toggle_group id="client-outline" type="single" variant="outline">
    <.toggle_group_item value="left" variant="outline">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
    </.toggle_group_item>
    <.toggle_group_item value="center" variant="outline">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="17" x2="7" y1="12" y2="12"/><line x1="19" x2="5" y1="18" y2="18"/></svg>
    </.toggle_group_item>
    <.toggle_group_item value="right" variant="outline">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="21" x2="9" y1="12" y2="12"/><line x1="21" x2="7" y1="18" y2="18"/></svg>
    </.toggle_group_item>
  </.toggle_group>
</div>

Hybrid

JS toggles instantly for responsiveness, then pushes the event to the server. The event log below updates via LiveView.

Toggle

ToggleGroup

Event Log

Toggle an item above to see events appear here.

Server-controlled

The server owns the state. Use the buttons below to control the toggle and group externally.

Toggle

ToggleGroup

Server pressed: false

Server group value: ""

<div>
  <p class="mb-2 text-sm font-medium">Toggle</p>
  <div class="flex flex-wrap gap-2 mb-3">
    <.button size="sm" variant="outline" phx-click="set-pressed" phx-value-pressed="true">
      Press
    </.button>
    <.button size="sm" variant="outline" phx-click="set-pressed" phx-value-pressed="false">
      Unpress
    </.button>
  </div>
  <.card>
    <.card_content class="pt-6">
      <.toggle id="server-toggle" pressed={@server_pressed} on_pressed_change="toggle:change">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>
      </.toggle>
    </.card_content>
  </.card>
</div>

<div>
  <p class="mb-2 text-sm font-medium">ToggleGroup</p>
  <div class="flex flex-wrap gap-2 mb-3">
    <.button size="sm" variant="outline" phx-click="set-group-value" phx-value-item="left">
      Select "Left"
    </.button>
    <.button size="sm" variant="outline" phx-click="set-group-value" phx-value-item="center">
      Select "Center"
    </.button>
    <.button size="sm" variant="destructive" phx-click="set-group-value" phx-value-item="">
      Clear
    </.button>
  </div>
  <.card>
    <.card_content class="pt-6">
      <.toggle_group id="server-group" type="single" value={@server_group_value} on_value_change="toggle-group:change">
        <.toggle_group_item value="left">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/></svg>
        </.toggle_group_item>
        <.toggle_group_item value="center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="17" x2="7" y1="12" y2="12"/><line x1="19" x2="5" y1="18" y2="18"/></svg>
        </.toggle_group_item>
        <.toggle_group_item value="right">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" x2="3" y1="6" y2="6"/><line x1="21" x2="9" y1="12" y2="12"/><line x1="21" x2="7" y1="18" y2="18"/></svg>
        </.toggle_group_item>
      </.toggle_group>
    </.card_content>
  </.card>
</div>

Push Event (Server → Client)

The server pushes commands to a client-mode toggle via push_event/3. The toggle has no pressed or on_pressed_change — it's client-only, but the server can still command it.