ToggleGroup

import { createSignal } from 'solid-js';
import { ToggleGroup, ToggleGroupItem, type ToggleGroupValue } from '@tile-ui/solid';

export default function ToggleGroupDemo() {
	const [value, setValue] = createSignal<ToggleGroupValue>(['bold']);
	const active = () => {

Use ToggleGroup for single or multiple toolbar choices with roving focus.

Registry install

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

Package usage

import { ToggleGroup, ToggleGroupItem } from '@tile-ui/solid';

<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
utils	Shared utility helpers
styles	Shared SCSS tokens and globals

API reference

ToggleGroup

Prop	Type	Default
type	'single' | 'multiple'	—
value	ToggleGroupValue	—
defaultValue	ToggleGroupValue	—
onValueChange	(value: ToggleGroupValue) => void	—
disabled	boolean	—
orientation	RadioGroupOrientation	—

ToggleGroupItem

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

Related docs

• Toggle
• ButtonGroup
• Tabs