Accordion

import { Accordion } from '@yarcl/react';

Shipping

Orders ship within two working days.

Returns

Free returns within 30 days of delivery.

Gift cards

Coming soon.

Warranty

Two years on every product.

<Accordion type="single" defaultValue="shipping">
  <Accordion.Item value="shipping">
    <Accordion.Trigger>Shipping</Accordion.Trigger>
    <Accordion.Content>Orders ship within two working days.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="returns">
    <Accordion.Trigger>Returns</Accordion.Trigger>
    <Accordion.Content>Free returns within 30 days of delivery.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="gift-cards" disabled>
    <Accordion.Trigger>Gift cards</Accordion.Trigger>
    <Accordion.Content>Coming soon.</Accordion.Content>
  </Accordion.Item>
</Accordion>

With type="single", opening an item closes the others. Clicking the open item closes it; set collapsible={false} to keep one item open at all times.

Controls beside the trigger

Wrap the trigger in Accordion.Header to place a drag handle, status or menu beside it. These controls are siblings of the trigger button, so they remain independently focusable. Hovering the trigger highlights the whole header row.

<Accordion.Item value="module-1">
  <Accordion.Header
    start={<button type="button" aria-label="Reorder module">⋮⋮</button>}
    end={<span>Published</span>}
  >
    <Accordion.Trigger>Introduction</Accordion.Trigger>
  </Accordion.Header>
  <Accordion.Content>Lessons in this module</Accordion.Content>
</Accordion.Item>

Multiple open

type="multiple" lets items open independently. Here the open items are controlled with value and onValueChange.

Open: Account

Account

Name, email and password.

Notifications

Email and push preferences.

Privacy

Who can see your profile.

const [open, setOpen] = useState<string[]>(['account']);

<Accordion type="multiple" value={open} onValueChange={setOpen} size="sm" color="success">
  <Accordion.Item value="account">…</Accordion.Item>
  <Accordion.Item value="notifications">…</Accordion.Item>
</Accordion>

Tokens

• size sets the trigger height, padding, font size and icon size from your sizes.
• radius rounds the outer frame, from your radii.
• color tints the open item’s chevron, from your colors.
• The frame and dividers use borders.width and the neutral border color.
• Opening and closing animate with motion.base and motion.easing. With reduced motion preferred, panels open and close instantly.

All three props can be set per component in components.Accordion.

Accessibility

Follows the WAI-ARIA accordion pattern. Each Accordion.Trigger renders a button inside a heading (h3 by default; set level to fit your page outline). The button has aria-expanded and aria-controls, and each Accordion.Content is a region labelled by its trigger. Closed panels are hidden from assistive technology.

Key	Action
Enter Space	opens or closes the focused item
Tab	moves to the next trigger or focusable content
↓ ↑	moves to the next or previous trigger, skipping disabled ones
Home End	moves to the first or last trigger

Props

Accordion

Plus type, and value (controlled) or defaultValue (uncontrolled). With type="single" the value is a string or null and collapsible is available; with type="multiple" it is an array of strings.

Prop	Type	Default	Description
children	ReactNode		Accordion.Items.
color	Colorconfig	config.defaults.color	Color of the open item's indicator, from the colors config.
disabled	boolean		Disables every item.
radius	'size' | Radiusconfig	config.defaults.radius	Corner radius of the outer frame, from the radii config, or 'size' to match the size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Trigger height, padding and font size, from the sizes config.

Accordion.Item

Prop	Type	Default	Description
value required	string		Identifies the item in the accordion's value.
disabled	boolean		Prevents opening or closing this item.

Accordion.Header

Prop	Type	Default	Description
end	ReactNode		Content after the trigger, such as a badge or actions menu.
start	ReactNode		Content before the trigger, such as a drag handle.

Accordion.Trigger

Prop	Type	Default	Description
level	3 | 2 | 4 | 1 | 5 | 6	3	Level of the heading that wraps the button, to fit the page outline.