Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Installation
Install the Alert component using the nocta-ui CLI:
npx nocta-ui add accordion
Then import the components you need:
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent
} from './accordion';
Examples
Basic
A simple accordion with collapsible content sections.
Nocta UI is a modern React component library built with performance and accessibility in mind.
You can install components using our CLI:
npx nocta-ui add accordion
Yes! All components in Nocta UI have full dark mode support with automatic switching.
Card Variant
Use the card variant for a more elevated appearance with individual cards for each item.
Manage your profile, change email address and password.
Enable two-factor authentication and manage your login sessions.
Customize the interface theme, language, and notification settings.
Multiple Open
Allow multiple accordion items to be open simultaneously by setting type="multiple"
.
Learn the fundamentals of React - components, props, state and lifecycle.
How to use TypeScript with React for better type safety.
Writing unit and integration tests for React components.
Sizes
The accordion comes in three sizes: sm
, md
(default), and lg
.
Short answer in small size.
Standard answer in default size.
More detailed answer in larger size, which can contain more content and details requiring additional space.
Controlled
Control the accordion state externally using the value
and onValueChange
props.
This accordion is controlled externally. You can open and close it programmatically.
The state of this accordion is managed by the parent component.
API Reference
Accordion
Prop | Type | Default | Description |
---|---|---|---|
type | 'single' | 'multiple' | 'single' | Whether one or multiple items can be open at the same time |
variant | 'default' | 'card' | 'default' | The visual variant of the accordion |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the accordion |
defaultValue | string | string[] | undefined | Default open items (uncontrolled) |
value | string | string[] | undefined | Open items (controlled) |
onValueChange | (value: string | string[]) => void | undefined | Callback when open items change |
className | string | '' | Additional CSS classes |
AccordionItem
Prop | Type | Default | Description |
---|---|---|---|
value | string | - | Unique identifier for the item |
disabled | boolean | false | Whether the item is disabled |
className | string | '' | Additional CSS classes |
AccordionTrigger
Prop | Type | Default | Description |
---|---|---|---|
className | string | '' | Additional CSS classes |
AccordionContent
Prop | Type | Default | Description |
---|---|---|---|
className | string | '' | Additional CSS classes |
Accessibility
The Accordion component follows WAI-ARIA guidelines:
- Keyboard Navigation: Use
Tab
to navigate between triggers,Space
orEnter
to toggle items - Focus Management: Focus is properly managed when items are toggled
- Screen Reader Support: Proper ARIA attributes for state and relationships
- High Contrast: Works with high contrast mode and respects user preferences