Accordion v0.1.0 Data display

Disclosure list with single or multiple open items.

import { Accordion } from "latticeui-react";

Examples

Basic

Every part carries stable data-scope/data-part attributes - a versioned public API for your styles and tests.

Show code

<Accordion.Root defaultValue={["one"]}>
  <Accordion.Item value="one">
    <Accordion.Trigger>What is the anatomy contract?</Accordion.Trigger>
    <Accordion.Content>Stable data-part attributes, versioned like an API.</Accordion.Content>
  </Accordion.Item>
  ...
</Accordion.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="accordion"][data-part="root"]`
`item`	`div`	`[data-scope="accordion"][data-part="item"]`
`header`	`h3`	`[data-scope="accordion"][data-part="header"]`
`trigger`	`button`	`[data-scope="accordion"][data-part="trigger"]`
`indicator`	`span`	`[data-scope="accordion"][data-part="indicator"]`
`content`	`div[role=region]`	`[data-scope="accordion"][data-part="content"]`

Props

Prop	Type	Default
`Root.multiple`	`boolean`	`false`
`Root.value / defaultValue`	`string[]`	—
`Root.onValueChange`	`(value: string[]) => void`	—
`Item.value` *	`string`	—
`Item.disabled`	`boolean`	—

Accessibility

Roles: button trigger with aria-expandedregion content

Key	Action
`Enter / Space`	toggles item

Trigger is wrapped in an h3 heading per the ARIA accordion pattern.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="accordion"][data-part="trigger"] {
  /* your overrides */
}

State attributes: data-state=open|closeddata-disabled