Accordion
Expandable panels with full ARIA support. Uses an inline script for click toggling — no hydration bundle required. Pass items as an array of { value, label, content } objects.
Default
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
Yes. Accordion uses proper ARIA attributes (aria-expanded, aria-controls, role="region") and keyboard navigation. All interactive components follow WAI-ARIA patterns.
const items = [
{ value: 'item-1', label: 'What is Davaux UI?', content: '...' },
{ value: 'item-2', label: 'Does it require hydration?', content: '...' },
{ value: 'item-3', label: 'Is it accessible?', content: '...' },
]
<Accordion items={items} defaultValue="item-1" />Variants
default
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
contained
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
filled
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
separated
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
<Accordion items={items} variant="default" />
<Accordion items={items} variant="contained" />
<Accordion items={items} variant="filled" />
<Accordion items={items} variant="separated" />Multiple open
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
Yes. Accordion uses proper ARIA attributes (aria-expanded, aria-controls, role="region") and keyboard navigation. All interactive components follow WAI-ARIA patterns.
<Accordion
items={items}
multiple
defaultValue={['item-1', 'item-2']}
/>Chevron position
chevronPosition="right" (default)
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
chevronPosition="left"
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
<Accordion items={items} chevronPosition="right" />
<Accordion items={items} chevronPosition="left" />Custom chevron
Davaux UI is a server-side component library for the Davaux framework. Components render to HTML on the server with zero client-side JavaScript required for static content.
Static components like Accordion and Tabs include a small inline script for interactivity — no full hydration bundle needed. Interactive island components use the Davaux islands architecture.
<Accordion items={items} chevron="▸" />
{/* TablerIcon also works */}
<Accordion items={items} chevron={<TablerIcon name="plus" />} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | — | Array of panel definitions |
defaultValue | string|string[] | — | Initially open panel(s) |
multiple | boolean | — | Allow multiple panels open simultaneously |
variant | 'default'|'contained'|'filled'|'separated' | 'default' | Visual style |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Corner radius |
chevronPosition | 'left'|'right' | 'right' | Side where the expand icon appears |
disableChevronRotation | boolean | — | Prevents chevron from rotating when open |
chevron | children | — | Custom icon in place of the default chevron; accepts a TablerIcon, SVG string, or any element |
AccordionItem
| Field | Type | Description |
|---|---|---|
value | string | Unique key |
label | children | Control bar heading content |
content | children | Panel body shown when expanded |
icon | children | Optional icon beside the label |
disabled | boolean | Prevents opening/closing this panel |