Accordion

Installable Solid source with shared core logic and Sass.

Open section: registry

import { createSignal } from 'solid-js';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@tile-ui/solid';

export default function AccordionDemo() {
	const [value, setValue] = createSignal('registry');
	return (

Use Accordion to organize related disclosure sections with predictable keyboard movement.

Registry install

pnpm dlx shadcn@latest add @tile-ui/accordion

Package usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tile-ui/solid';

<Accordion type="single" defaultValue="one" collapsible>
	<AccordionItem value="one">
		<AccordionTrigger>Section one</AccordionTrigger>
		<AccordionContent>Content one.</AccordionContent>
	</AccordionItem>
</Accordion>

Highlights

Single and multiple disclosure modes
Disabled-aware roving focus
Stable custom or generated trigger/content IDs

Registry dependencies

Item	Purpose
`accordion`	Component source and module styles
`core`	Framework-agnostic logic helpers
`utils`	Shared utility helpers
`styles`	Shared SCSS tokens and globals

API reference

Prop	Type	Default
`type`	`'single' \| 'multiple'`	—
`value`	`string \| string[]`	—
`defaultValue`	`string \| string[]`	—
`onValueChange`	`(value: string \| string[]) => void`	—
`collapsible`	`boolean`	—
`ref`	`AccordionRef<HTMLDivElement>`	—

AccordionItem

Prop	Type	Default
`value`	`string`	—
`disabled`	`boolean`	—
`triggerId`	`string`	—
`contentId`	`string`	—
`ref`	`AccordionRef<HTMLDivElement>`	—

AccordionTrigger

Prop	Type	Default
`ref`	`AccordionRef<HTMLButtonElement>`	—

AccordionContent

Prop	Type	Default
`ref`	`AccordionRef<HTMLDivElement>`	—