Component

Toggle button group

<DomToggleButtonGroup>

A single or multiple selection button group for compact form choices.

Playground

Try every prop live

Toggle button group playground

Use single mode as a segmented control, or multiple mode for independent pressed options.

View

Properties

Control props

Value

Selected value for single mode, or selected values for multiple mode.

Options

Row 1

Label

Value

Row 2

Label

Value

Row 3

Label

Value

Toggle button options.

Type

Allow one selection or many.

Orientation

Visual direction and arrow key behaviour.

Size

Button size.

Field props

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

Placeholder

Placeholder shown when the control is empty.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or false to render only the control while keeping form state wiring.

Playground.vuevue

<script setup>
import { reactive } from 'vue';
import { DomToggleButtonGroup } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "grid",
	  "id": "",
	  "name": "",
	  "label": "View",
	  "description": "",
	  "placeholder": "",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": {},
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "options": [
	    {
	      "label": "List",
	      "value": "list"
	    },
	    {
	      "label": "Grid",
	      "value": "grid"
	    },
	    {
	      "label": "Board",
	      "value": "board"
	    }
	  ],
	  "type": "single",
	  "orientation": "horizontal",
	  "size": "md"
	});
</script>

<template>
	<DomToggleButtonGroup
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Single and multiple modes

Single mode returns one value. Multiple mode returns an array of pressed values.

View

Single mode behaves like a segmented control.

Panels

Multiple mode lets users keep more than one option pressed.

{
  "view": "grid",
  "tools": [
    "comments"
  ]
}

ViewMode.vuevue

<script setup>
import { ref } from 'vue';
import { DomToggleButtonGroup } from '@getdom/studio/vue';

const view = ref('grid');
const tools = ref(['comments']);

const views = [
	{ label: 'List', value: 'list' },
	{ label: 'Grid', value: 'grid' },
	{ label: 'Board', value: 'board' },
];

const toolOptions = [
	{ label: 'Comments', value: 'comments' },
	{ label: 'Activity', value: 'activity' },
	{ label: 'Files', value: 'files' },
];
</script>

<template>
	<div class="space-y-5">
		<DomToggleButtonGroup
			v-model="view"
			label="View"
			:options="views"
			description="Single mode behaves like a segmented control."
		/>

		<DomToggleButtonGroup
			v-model="tools"
			type="multiple"
			label="Panels"
			:options="toolOptions"
			description="Multiple mode lets users keep more than one option pressed."
		/>

		<pre class="overflow-auto rounded-xl border border-border bg-secondary/30 p-3 text-xs text-muted-fg">{{ { view, tools } }}</pre>
	</div>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	string \| number \| array	Array<unknown>	''	Selected value for single mode, or selected values for multiple mode.
`options`* `[ { label: "Option 1", value: "option-1", } ]`	array	Array<OptionsItem `type OptionsItem = { label?: string; // Label value?: string; // Value };` >	—	Toggle button options.
`type`	'single' \| 'multiple'	string	'single'	Allow one selection or many.
`orientation`	'horizontal' \| 'vertical'	string	'horizontal'	Visual direction and arrow key behaviour.
`size`	'sm' \| 'md' \| 'lg'	string	'md'	Button size.

Field props

Name	Type	TS	Default	Description
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`placeholder`	string	string	''	Placeholder shown when the control is empty.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	{}	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| false	string	'field'	Render default field chrome, or false to render only the control while keeping form state wiring.

Auto-generated from Toggle button group.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	(value `value: string \| string[];` : string \| string[])	Emitted when selection changes.
@focus	—	—
@blur	—	—

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.