Collapsible

2nd lightest of the thirty-two, by js weight

One section that opens and shuts. A native <details> pair, so the browser does all of it and every tier ships no JavaScript.

Example (a11y tier)

Shipping details

Delivered within three working days. Tracking is emailed when the parcel leaves the warehouse.

Returns

Thirty days, unworn, with the tag still attached.

Import

import Collapsible from 'abaabil/collapsible'         // structure only

import Collapsible from 'abaabil/collapsible/styled'  // + CSS

import Collapsible from 'abaabil/collapsible/a11y'    // unchanged, see below

The a11y tier adds nothing, and that is the finding

<summary> already carries the right role, already exposes expanded and collapsed state, already responds to Enter and Space, and is already in the tab order. Adding aria-expanded on top does not reinforce the native state, it competes with it: browsers compute the state from the element's own open attribute, and an author value that disagrees produces a control announcing one thing while doing another.

So the tier re-exports the component unchanged. It exists so that a codebase can import the a11y tier everywhere without having to remember which components needed one. Accordion's Disclosure is re-exported the same way.

Why this is not in the comparison

Every library measured on the Why page has an equivalent, so by the two rules published there this component qualifies for a row. It does not have one.

For Headless UI and React Aria the equivalent is Disclosure, which is the exact import their accordion row already uses; for Ant Design it is Collapse and for Material UI it is Accordion, likewise already counted. A collapsible row would reprint those libraries' accordion figures against a new component here measuring under a hundred bytes.

None of that would be a measurement error. The error would be the framing: we added a cheap single-section variant and they did not, and a table scoring that as a win compares a product decision to a bundle size. The same rule that produced the four-times Radix correction says shaping the row list is the same act as shaping an import list.

Collapsible or accordion?

Use accordion when several panels should close each other, which the native name attribute does with no JavaScript. Use this when one section stands alone, so that a single disclosure does not require importing an accordion's stylesheet.

Neither offers a way to give the summary heading semantics. A heading nested inside <summary> is not reliably exposed as one, and <summary> must be the first child of <details> so it cannot be wrapped in a heading either. An API for it would let you believe you had solved heading navigation when you had not.

Props

Prop	Type	Default	Tier	Description
`summary`	ReactNode	—	all	The always-visible trigger.
`defaultOpen`	boolean	—	all	Maps to the native `open` attribute.
`className`	string	—	all	Merged with the base class.
`summaryClassName`	string	—	all	Merged with the summary's base class.