SaladUI

Toggle Group

A set of two-state buttons that can be toggled on or off.

Read more Read less

Example:

<.toggle_group name=”style” type=”single” value=”bold”>

<.toggle_group_item value="bold" builder={builder} aria-label="Toggle bold">
  <.icon name="hero-bold" class="h-4 w-4" />
</.toggle_group_item>
<.toggle_group_item value="italic" builder={builder} aria-label="Toggle italic">
  <.icon name="hero-italic" class="h-4 w-4" />
</.toggle_group_item>
<.toggle_group_item value="underline" builder={builder} aria-label="Toggle underline">
  <.icon name="hero-underline" class="h-4 w-4" />
</.toggle_group_item>

</.toggle_group>

Default toggle group Open in playground 
<.toggle_group :let={builder} name="style_group" type="single" value="bold">
  <.toggle_group_item value="bold" builder={builder} aria-label="Toggle bold">
  <.icon name="hero-bold" class="h-4 w-4" />
  </.toggle_group_item>
            <.toggle_group_item value="italic" builder={builder} aria-label="Toggle italic">
  <.icon name="hero-italic" class="h-4 w-4" />
  </.toggle_group_item>
  <.toggle_group_item value="underline" builder={builder} aria-label="Toggle underline">
  <.icon name="hero-underline" class="h-4 w-4" />
  </.toggle_group_item>
</.toggle_group>
Toggle group multiple Open in playground 
<.toggle_group :let={builder} name="multiple_group" value={["bold"]} multiple={true}>
  <.toggle_group_item value="bold" builder={builder} aria-label="Toggle bold">
  <.icon name="hero-bold" class="h-4 w-4" />
  </.toggle_group_item>
            <.toggle_group_item value="italic" builder={builder} aria-label="Toggle italic">
  <.icon name="hero-italic" class="h-4 w-4" />
  </.toggle_group_item>
  <.toggle_group_item value="underline" builder={builder} aria-label="Toggle underline">
  <.icon name="hero-underline" class="h-4 w-4" />
  </.toggle_group_item>
</.toggle_group>
Toggle group outline Open in playground 
<.toggle_group :let={builder} name="multiple_group_outline" size="sm" value={["bold"]} multiple={true} variant="outline">
  <.toggle_group_item value="bold" builder={builder} aria-label="Toggle bold">
  <.icon name="hero-bold" class="h-4 w-4" />
  </.toggle_group_item>
            <.toggle_group_item value="italic" builder={builder} aria-label="Toggle italic">
  <.icon name="hero-italic" class="h-4 w-4" />
  </.toggle_group_item>
  <.toggle_group_item value="underline" builder={builder} aria-label="Toggle underline">
  <.icon name="hero-underline" class="h-4 w-4" />
  </.toggle_group_item>
</.toggle_group>