Installation

pnpm dlx kliping@latest add toggle-group

Usage

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
</script>

<template>
  <ToggleGroup type="multiple">
    <ToggleGroupItem value="a">
      A
    </ToggleGroupItem>
    <ToggleGroupItem value="b">
      B
    </ToggleGroupItem>
    <ToggleGroupItem value="c">
      C
    </ToggleGroupItem>
  </ToggleGroup>
</template>

Examples

Bawaan

Outline

Single

Kecil

Besar

Nonaktif

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, class-variance-authority@^0.7.1, reka-ui@^2.10.3
Kliping items	toggle
Files	components/ui/toggle-group/toggle-group.vue components/ui/toggle-group/toggle-group-item.vue components/ui/toggle-group/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<ToggleGroup>
  <ToggleGroupItem />
</ToggleGroup>

API Reference

ToggleGroup

Prop	Type	Default	Description
rovingFocus?	boolean	—	When false, navigating through the items using arrow keys will be disabled.
disabled?	boolean	—	When true, prevents the user from interacting with the toggle group and all its items.
orientation?	DataOrientation	—	The orientation of the component, which determines how focus moves: horizontal for left/right arrows and vertical for up/down arrows.
dir?	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
loop?	boolean	—	When loop and rovingFocus is true, keyboard navigation will loop from last item to first, and vice versa.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.
type?	SingleOrMultipleType	—	Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from modelValue and defaultValue.
modelValue?	AcceptableValue | AcceptableValue[]	—	The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with v-model
defaultValue?	AcceptableValue | AcceptableValue[]	—	The default active value of the item(s). Use when you do not need to control the state of the item(s).
variant?	"default" | "outline"	—	The visual style.
size?	"default" | "sm" | "lg"	—	The visual size.
spacing?	number	0	Gap between items in Tailwind spacing units; 0 (default) joins the items into one bar.

Event	Payload	Description
@update:modelValue	[payload: AcceptableValue | AcceptableValue[]]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: AcceptableValue | AcceptableValue[] | undefined; }

Data attribute	Value
[data-slot]	"toggle-group"
[data-size]	"default" | "sm" | "lg"
[data-variant]	"default" | "outline"
[data-spacing]	number

ToggleGroupItem

Prop	Type	Default	Description
value	AcceptableValue	—	A string value for the toggle group item. All items within a toggle group should use a unique value.
disabled?	boolean	—	When true, prevents the user from interacting with the toggle.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
variant?	"default" | "outline"	—	The visual style.
size?	"default" | "sm" | "lg"	—	The visual size.

Slot	Props
#default	{ modelValue: boolean; state: DataState; pressed: boolean; disabled: boolean; }

Data attribute	Value
[data-slot]	"toggle-group-item"
[data-variant]	"default" | "outline"
[data-size]	"default" | "sm" | "lg"
[data-spacing]	set at runtime

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI ToggleGroup yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Tab	Moves focus to either the pressed item or the first item in the group.
Space	Activates/deactivates the item.
Enter	Activates/deactivates the item.
ArrowDown	Moves focus to the next item in the group.
ArrowRight	Moves focus to the next item in the group.
ArrowUp	Moves focus to the previous item in the group.
ArrowLeft	Moves focus to the previous item in the group.
Home	Moves focus to the first item.
End	Moves focus to the last item.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --radius.

Variabel khusus komponen ini — bisa ditimpa lewat style atau CSS Anda:

Variable	Value
--gap	dihitung saat runtime

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.