Single-open disclosure family with controlled and uncontrolled state.
@combric/react · v1.1.1 · Current
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@combric/react";
export function Example() {
return <Accordion defaultValue="details"><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Accessible disclosure content.</AccordionContent></AccordionItem></Accordion>;
}import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@combric/react";
export function Example() {
return <Accordion defaultValue="details"><AccordionItem value="details"><AccordionTrigger>Available details</AccordionTrigger><AccordionContent>Content can be opened.</AccordionContent></AccordionItem><AccordionItem value="locked" disabled><AccordionTrigger>Unavailable details</AccordionTrigger><AccordionContent>This item is disabled.</AccordionContent></AccordionItem></Accordion>;
}| Name |
|---|
Accordion |
AccordionItem |
AccordionTrigger |
AccordionContent |
| Property / capability | Published contract |
|---|---|
| Contract | value/defaultValue |
| Contract | onValueChange |
| Contract | disabled items |
Native buttons and stable IDs connect expanded state, controls, and labelled regions.
Native button Enter and Space behavior.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.