Toggle Group · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JToggleGroup, JToggleGroupItem } from '@juxtui/ui'

Usage #

<JToggleGroup v-model="align" label="Text alignment">
  <JToggleGroupItem value="left">Left</JToggleGroupItem>
  <JToggleGroupItem value="center">Center</JToggleGroupItem>
  <JToggleGroupItem value="right">Right</JToggleGroupItem>
</JToggleGroup>

In single mode (the default) the model is one value or null; in multiple mode it’s an array. Nothing else about the markup changes.

Unlike JTabs, no content is tied to the selection — use a toggle group for settings and formatting choices, not for switching between panels.

Variants & examples #

Multiple selection#

Set type="multiple" and bind an array.

<script setup lang="ts">
const style = ref<string[]>(['bold'])
</script>

<template>
  <JToggleGroup v-model="style" type="multiple" label="Text style">
    <JToggleGroupItem value="bold" label="Bold">B</JToggleGroupItem>
    <JToggleGroupItem value="italic" label="Italic">I</JToggleGroupItem>
    <JToggleGroupItem value="underline" label="Underline">U</JToggleGroupItem>
  </JToggleGroup>
</template>

Sizes#

<script setup lang="ts">
const small = ref('list')
const medium = ref('list')
</script>

<template>
  <div class="flex flex-col items-start gap-4">
    <JToggleGroup v-model="small" size="sm" label="View, small">
      <JToggleGroupItem value="list">List</JToggleGroupItem>
      <JToggleGroupItem value="grid">Grid</JToggleGroupItem>
    </JToggleGroup>
    <JToggleGroup v-model="medium" size="md" label="View, medium">
      <JToggleGroupItem value="list">List</JToggleGroupItem>
      <JToggleGroupItem value="grid">Grid</JToggleGroupItem>
    </JToggleGroup>
  </div>
</template>

Disabled#

<script setup lang="ts">
const align = ref('left')
</script>

<template>
  <JToggleGroup v-model="align" label="Text alignment" disabled>
    <JToggleGroupItem value="left">Left</JToggleGroupItem>
    <JToggleGroupItem value="center">Center</JToggleGroupItem>
    <JToggleGroupItem value="right">Right</JToggleGroupItem>
  </JToggleGroup>
</template>

API #

JToggleGroup

Prop	Type	Default	Description
modelValue	`string \| string[] \| null`	`null`	Bound with `v-model`. A single value (or `null`) in `single` mode, an array in `multiple` mode.
type	`'single' \| 'multiple'`	`'single'`	`single` keeps at most one item pressed; `multiple` lets any number stay pressed.
size	`'sm' \| 'md'`	`'md'`	Height of the items.
disabled	`boolean`	`false`	Disables every item in the group.
label	`string`	—	Accessible name for the group.

Events

Event	Payload	Description
update:modelValue	`string \| string[]`	Emitted when an item is toggled.

Slots

Slot	Props	Description
default	—	The `JToggleGroupItem` items.

JToggleGroupItem

Prop	Type	Default	Description
value	`string`	—	Identifies this item in the group’s `v-model`. Required.
disabled	`boolean`	`false`	Disables this item, on top of the group’s own `disabled`.
label	`string`	—	Accessible name, for when the slot content isn’t descriptive enough (e.g. an icon-only item).

Slots

Slot	Props	Description
default	—	Item content — text, an icon, or both.

Accessibility #

Follows the WAI-ARIA toolbar pattern: the group is role="group" with aria-label, and arrow keys move real focus between native <button> items so pointer and keyboard state never disagree.
Each item is a native <button> with aria-pressed, reflecting its selected state — announced as a toggle button, not a radio or checkbox, in both single and multiple mode.
Give icon-only items a label, since aria-pressed alone doesn’t explain what the button does.

Keyboard #

Key	Action
`→↓`	Move focus to the next item, wrapping around. Disabled items are skipped.
`←↑`	Move focus to the previous item, wrapping around. Disabled items are skipped.
`HomeEnd`	Move focus to the first or last item.
`SpaceEnter`	Toggle the focused item.