Toggle Group

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

Examples

Default

<script setup>
import { ToggleGroup, ToggleGroupItem } from '@empathyds/vue'
import { Bold, Italic, Underline } from 'lucide-vue-next'
</script>

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
    <Underline class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Single Selection

<script setup>
import { ToggleGroup, ToggleGroupItem } from '@empathyds/vue'
import { Bold, Italic, Underline } from 'lucide-vue-next'
</script>

<ToggleGroup type="single">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic class="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
    <Underline class="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Props

ToggleGroup

Prop	Type	Default	Description
type	single | multiple	single	The type of the toggle group.
defaultValue	string | string[]	-	The default value of the toggle group.
modelValue	string | string[]	-	The controlled value of the toggle group.
disabled	boolean	false	Whether the toggle group is disabled.
rohing	boolean	true	Whether the keyboard navigation should loop around.
orientation	horizontal | vertical	horizontal	The orientation of the toggle group.
dir	ltr | rtl	-	The reading direction of the toggle group.

ToggleGroupItem

Prop	Type	Default	Description
value	string	-	The value of the item.
disabled	boolean	false	Whether the item is disabled.

Slots

ToggleGroup

Slot	Description
default	The items of the toggle group.

ToggleGroupItem

Slot	Description
default	The content of the item.