Tile UI Vue
Source code

Components

ToggleGroup

Grouped toggle buttons.

Use ToggleGroup to group mutually exclusive or multiple selectable toggles.

import { ToggleGroup, ToggleGroupItem } from '@tile-ui/vue';
 
export default function ToggleGroupDemo() {
	return (
		<ToggleGroup type="single" defaultValue="left">
			<ToggleGroupItem value="left">Left</ToggleGroupItem>

Registry install

pnpm dlx shadcn@latest add @tile-ui/toggle-group

Package usage

import { ToggleGroup, ToggleGroupItem } from '@tile-ui/vue';
 
<ToggleGroup type="single" defaultValue="a">
	<ToggleGroupItem value="a">A</ToggleGroupItem>
	<ToggleGroupItem value="b">B</ToggleGroupItem>
</ToggleGroup>

Highlights

  • Single and multiple modes
  • Item variants and sizes

Registry dependencies

Item Purpose
toggle-group Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

ToggleGroup

Prop Type Default
type 'single' | 'multiple' —

ToggleGroupItem

Prop Type Default
value string —
variant ToggleVariant —
size ToggleSize —
PreviousToggleNextTooltip