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>

Attribute Type Documentation Default Value
name :string
multiple :any false
field %FormField{} a form field struct retrieved from the form, for example: @form[:email]
default-value :any
value :string The value of the toggle group. It's a single value for single type and a list of values for multiple type.
disabled :boolean false
class :string
variant :string "default"
size :string "default"
rest :global
inner_block :slot 
<.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>