Basic
A single accordion keeps one settings section visible at a time.
navigationbeta
Accordion
Accordion component for Vellira applications.
Options
Usage
Import the component and configure it with the same props used in the playground.
Examples
Common patterns and practical usage examples.
Multiple open items
Use multiple mode when people need to compare information across sections.
Collapsible single item
Allow the current section to close when the interface can return to an empty state.
Controlled state
Store the open section in application state when another part of the interface needs to control it.
Default expanded state
Set an initial expanded item while keeping later changes uncontrolled.
Disabled state
Disable the whole accordion or a single item while preserving visible context.
Rich content
Panels can contain structured content for support notes or account summaries.
API
Props available for the React Accordion.
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Compound Accordion.Item, Accordion.Trigger, and Accordion.Content nodes. |
type | 'single' | 'single' | Determines whether one item or multiple items can be expanded. |
value | string | - | Controlled expanded value or values. |
defaultValue | string | - | Initial expanded value or values for uncontrolled usage. |
onValueChange | ( | - | Called with the next expanded value or values after interaction. |
collapsible | boolean | false | Allows an expanded single item to collapse back to no selection. |
disabled | boolean | false | Disables interaction for the root, item, or trigger. |
Accordion.Item
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Compound Accordion.Item, Accordion.Trigger, and Accordion.Content nodes. |
valueRequired | string | - | Controlled expanded value or values. |
disabled | boolean | false | Disables interaction for the root, item, or trigger. |
Accordion.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Compound Accordion.Item, Accordion.Trigger, and Accordion.Content nodes. |
disabled | boolean | false | Disables interaction for the root, item, or trigger. |
Accordion.Content
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Compound Accordion.Item, Accordion.Trigger, and Accordion.Content nodes. |
forceMount | boolean | - | Keeps content mounted even when the item is collapsed. |
Accessibility
Guidance for accessible usage and interaction.
Keyboard operation
Triggers are native buttons. Tab to a trigger and use Enter or Space to expand or collapse its section.
disabledExpanded state
Each trigger exposes its expanded state and references the content panel it controls.