Toggle Group

#Basic usage

toggle-group/basic Vue React

toggle-group/basic.vue

<script setup lang="ts">
import { ToggleGroup } from "@bysages/vue";

const strokeAttrs = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  "stroke-width": "2",
  "stroke-linecap": "round",
  "stroke-linejoin": "round",
  "aria-hidden": "true",
};

const aligns = [
  { value: "left", label: "Align left", d: "M4 4v16M9 8h10M9 12h12M9 16h7" },
  { value: "center", label: "Align center", d: "M12 4v16M7 8h10M4 12h16M8 16h8" },
  { value: "right", label: "Align right", d: "M20 4v16M5 8h10M3 12h12M8 16h7" },
  { value: "justify", label: "Align justified", d: "M4 6h16M4 12h16M4 18h16" },
];
</script>

<template>
  <ToggleGroup.Root :default-value="['left']" aria-label="Text alignment">
    <ToggleGroup.Item
      v-for="align in aligns"
      :key="align.value"
      :value="align.value"
      :aria-label="align.label"
    >
      <svg v-bind="strokeAttrs"><path :d="align.d" /></svg>
    </ToggleGroup.Item>
  </ToggleGroup.Root>
</template>

#Props

#Item

Prop	Type	Default	Description
`disabled`	`boolean \| undefined`		—
`value`	`string`		—

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the items.
`defaultValue`	`string[]`		The initial selected value of the toggle group when rendered. Use when you don't need to control the selected value of the toggle group.
`deselectable`	`boolean`	`true`	Whether the toggle group allows empty selection. Note: This is ignored if `multiple` is `true`.
`disabled`	`boolean`		Whether the toggle is disabled.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; item(value: string): string; }>`		The ids of the elements in the toggle. Useful for composition.
`loopFocus`	`boolean`	`true`	Whether to loop focus inside the toggle group.
`modelValue`	`string[]`		The v-model value of the toggle group
`multiple`	`boolean`		Whether to allow multiple toggles to be selected.
`orientation`	`toggleGroup.Orientation`	`"horizontal"`	The orientation of the toggle group.
`rovingFocus`	`boolean`	`true`	Whether to use roving tab index to manage focus.