Collapsible

State: closed

import { createSignal } from 'solid-js';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@tile-ui/solid';

export default function CollapsibleDemo() {
	const [open, setOpen] = createSignal(false);
	return (

Use Collapsible for one disclosure trigger and its associated content region.

Registry install

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

Package usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@tile-ui/solid';

<Collapsible>
	<CollapsibleTrigger>Details</CollapsibleTrigger>
	<CollapsibleContent>Extra content here.</CollapsibleContent>
</Collapsible>

Highlights

Controlled and uncontrolled state
Stable trigger and region IDs
Native hidden and disabled semantics

Registry dependencies

Item	Purpose
`collapsible`	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
`open`	`boolean`	—
`defaultOpen`	`boolean`	—
`disabled`	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—
`triggerId`	`string`	—
`contentId`	`string`	—
`ref`	`CollapsibleRef<HTMLDivElement>`	—

CollapsibleTrigger

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

CollapsibleContent

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