Toggle Group

Neobrutalist-styled toggle button group built on reka-ui's ToggleGroup primitive, supporting single or multiple selection. Variants and sizes are distributed to all child items via provide/inject, with support for horizontal and vertical orientations.

Demo

Preview

单选

多选

轮廓变体

尺寸

方向

水平

垂直

禁用

Installation

pnpm dlx brutx-vue@latest add toggle-group

Usage

Single Selection

When type="single", only one button can be selected at a time. modelValue is string.

vue

<script setup>
import { ref } from 'vue'
import { ToggleGroup, ToggleGroupItem } from 'brutx-ui-vue'
import { AlignLeft, AlignCenter, AlignRight } from '@lucide/vue'

const align = ref('left')
</script>

<template>
    <ToggleGroup type="single" v-model="align" variant="default">
        <ToggleGroupItem value="left">
            <AlignLeft class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="center">
            <AlignCenter class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="right">
            <AlignRight class="h-4 w-4" />
        </ToggleGroupItem>
    </ToggleGroup>
</template>

Multiple Selection

When type="multiple", multiple buttons can be selected simultaneously. modelValue is string[].

vue

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

const styles = ref([])
</script>

<template>
    <ToggleGroup type="multiple" v-model="styles" variant="default">
        <ToggleGroupItem value="bold">
            <Bold class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic">
            <Italic class="h-4 w-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline">
            <Underline class="h-4 w-4" />
        </ToggleGroupItem>
    </ToggleGroup>
</template>

Orientation

Control the layout direction via the orientation prop. When set to vertical, the container uses flex-col and passes the value to the reka-ui primitive to set aria-orientation.

vue

<script setup>
import { ref } from 'vue'
import { ToggleGroup, ToggleGroupItem } from 'brutx-ui-vue'

const styles = ref([])
</script>

<template>
    <ToggleGroup type="multiple" v-model="styles" orientation="vertical">
        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
    </ToggleGroup>
</template>

Variants

Variant	Description
`default`	With background and small shadow, primary color background when pressed
`outline`	Transparent with border, secondary color background when pressed

Variants are set on ToggleGroup and distributed to all ToggleGroupItem children via provide/inject. Children can also override individually.

Sizes

Size	Height	Min Width	Font Size
`sm`	`h-8`	`min-w-8`	`text-xs`
`default`	`h-10`	`min-w-10`	`text-sm`
`lg`	`h-12`	`min-w-12`	`text-sm`

Sub-components

Component	Description
`ToggleGroup`	Root component, manages selected state and group configuration
`ToggleGroupItem`	Child item button, inherits variant and size from parent

API Reference

ToggleGroup

ToggleGroup — Props
Name	Type	Default	Description
`type`	`"single" \| "multiple" \| undefined`	`"single"`	Selects single- or multiple-selection mode. A single value is a string; multiple values are a string array.
Details Declared type "single" \| "multiple" \| undefined Literal values `"multiple"` `"single"` Default value details Declaration `'single'` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `"single"` Source ToggleGroup.vue:12 packages/ui/src/components/toggle-group/ToggleGroup.vue
`modelValue`	`string \| string[] \| undefined`	`undefined`	The current selected value, available through v-model. Its shape is determined by type.
Details Declared type string \| string[] \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `undefined` Source ToggleGroup.vue:13 packages/ui/src/components/toggle-group/ToggleGroup.vue
`variant`	`"default" \| "outline" \| undefined`	`"default"`	Selects the default visual variant passed to items that do not override it.
Details Declared type NonNullable<"default" \| "outline" \| null \| undefined> \| undefined Literal values `"default"` `"outline"` Default value details Declaration `'default'` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `"default"` Source ToggleGroup.vue:14 packages/ui/src/components/toggle-group/ToggleGroup.vue
`size`	`"default" \| "lg" \| "sm" \| undefined`	`"default"`	Selects the default size passed to items that do not override it.
Details Declared type NonNullable<"default" \| "lg" \| "sm" \| null \| undefined> \| undefined Literal values `"default"` `"lg"` `"sm"` Default value details Declaration `'default'` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `"default"` Source ToggleGroup.vue:15 packages/ui/src/components/toggle-group/ToggleGroup.vue
`orientation`	`"vertical" \| "horizontal" \| undefined`	`"horizontal"`	Selects horizontal or vertical layout. Vertical mode uses a column flex container and is passed to the Reka UI primitive.
Details Declared type "vertical" \| "horizontal" \| undefined Literal values `"horizontal"` `"vertical"` Default value details Declaration `'horizontal'` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `"horizontal"` Source ToggleGroup.vue:16 packages/ui/src/components/toggle-group/ToggleGroup.vue
`disabled`	`boolean \| undefined`	`false`	Disables the entire toggle group and provides the disabled state to its items.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `false` Source ToggleGroup.vue:17 packages/ui/src/components/toggle-group/ToggleGroup.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes appended to the ToggleGroup root container.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/toggle-group/ToggleGroup.vue Resolved value `undefined` Source ToggleGroup.vue:18 packages/ui/src/components/toggle-group/ToggleGroup.vue

ToggleGroup — Events
Name	Signature or type	Description
`@update:modelValue`	`[value: string \| string[]]`	Emitted when the underlying toggle group updates its value. An empty single selection is normalized to an empty string and an empty multiple selection to an empty array.
Details Declared type [value: string \| string[]] Source ToggleGroup.vue packages/ui/src/components/toggle-group/ToggleGroup.vue

ToggleGroup — Slots
Name	Signature or type	Description
`#default`	`{}`	Contains ToggleGroupItem children.
Details Declared type {} Source ToggleGroup.vue packages/ui/src/components/toggle-group/ToggleGroup.vue

ToggleGroupItem

ToggleGroupItem — Props
Name	Type	Default	Description
`value` Required	`string`	`—`	The unique string value represented by this toggle item.
Details Declared type string Default value details Not declared `—` Source ToggleGroupItem.vue:12 packages/ui/src/components/toggle-group/ToggleGroupItem.vue
`variant`	`"default" \| "outline" \| undefined`	`undefined`	Overrides the parent ToggleGroup variant. When omitted, it inherits the parent value and then falls back to default.
Details Declared type NonNullable<"default" \| "outline" \| null \| undefined> \| undefined Literal values `"default"` `"outline"` Default value details Declaration `undefined` Source: packages/ui/src/components/toggle-group/ToggleGroupItem.vue Resolved value `undefined` Source ToggleGroupItem.vue:13 packages/ui/src/components/toggle-group/ToggleGroupItem.vue
`size`	`"default" \| "lg" \| "sm" \| undefined`	`undefined`	Overrides the parent ToggleGroup size. When omitted, it inherits the parent value and then falls back to default.
Details Declared type NonNullable<"default" \| "lg" \| "sm" \| null \| undefined> \| undefined Literal values `"default"` `"lg"` `"sm"` Default value details Declaration `undefined` Source: packages/ui/src/components/toggle-group/ToggleGroupItem.vue Resolved value `undefined` Source ToggleGroupItem.vue:14 packages/ui/src/components/toggle-group/ToggleGroupItem.vue
`disabled`	`boolean \| undefined`	`false`	Disables this item. The final disabled state is the logical OR of this value and the parent ToggleGroup disabled state.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/toggle-group/ToggleGroupItem.vue Resolved value `false` Source ToggleGroupItem.vue:15 packages/ui/src/components/toggle-group/ToggleGroupItem.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes appended to the ToggleGroupItem button element.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/toggle-group/ToggleGroupItem.vue Resolved value `undefined` Source ToggleGroupItem.vue:16 packages/ui/src/components/toggle-group/ToggleGroupItem.vue

ToggleGroupItem — Slots
Name	Signature or type	Description
`#default`	`{}`	Renders the toggle button item’s icon, text, or other content.
Details Declared type {} Source ToggleGroupItem.vue packages/ui/src/components/toggle-group/ToggleGroupItem.vue

Accessibility

ARIA attributes: Automatically manages aria-pressed state; sets aria-orientation="vertical" when direction is vertical
Keyboard: Supports arrow keys for navigation within the group, Space / Enter to toggle selected state

Toggle Group ​

Demo ​

Installation ​

Usage ​

Single Selection ​

Multiple Selection ​

Orientation ​

Variants ​

Sizes ​

Sub-components ​

API Reference ​

ToggleGroup

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Declared type

Source

ToggleGroupItem

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

Accessibility ​

Toggle Group

Demo

Installation

Usage

Single Selection

Multiple Selection

Orientation

Variants

Sizes

Sub-components

API Reference

Accessibility