Prepared Docs

ListItem renders a static <li> when no href or onClick is provided. With href, content wraps Interactable as an anchor. With onClick, the <li> itself is interactive. Supports active, disabled, and common ARIA props (aria-label, aria-current, aria-expanded, etc.).

Props

Name	Type	Default	Description
`active`	`boolean`	—	When true, applies an active/selected visual state.
`aria-current`	`boolean \| "false" \| "true" \| "page" \| "step" \| "location" \| "date" \| "time"`	—	Indicates the current item in a set (e.g., navigation).
`aria-disabled`	`boolean`	—	ARIA disabled state.
`aria-expanded`	`boolean`	—	ARIA expanded state for collapsible items.
`aria-label`	`string`	—	Accessible label for the list item.
`className`	`string`	—	Additional CSS class name applied to the `<li>` element.
`data-active`	`string \| boolean`	—	Data attribute indicating active state, used for CSS styling.
`disabled`	`boolean`	—	When true, disables the list item interaction.
`href`	`string`	—	URL that makes the list item render as an anchor link.
`interactableClassName`	`string`	—	CSS class applied to the inner `Interactable` wrapper (when `href` or `onClick` is provided).
`onClick`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Click handler that makes the list item interactive.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the root element.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Link

Link active

Link disabled

Clickable

Clickable active

Clickable disabled

Static

List Item / Usage

List Item / Accessibility

Props

Name	Type	Default	Description
`active`	`boolean`	—	When true, applies an active/selected visual state.
`aria-current`	`boolean \| "false" \| "true" \| "page" \| "step" \| "location" \| "date" \| "time"`	—	Indicates the current item in a set (e.g., navigation).
`aria-disabled`	`boolean`	—	ARIA disabled state.
`aria-expanded`	`boolean`	—	ARIA expanded state for collapsible items.
`aria-label`	`string`	—	Accessible label for the list item.
`className`	`string`	—	Additional CSS class name applied to the `<li>` element.
`data-active`	`string \| boolean`	—	Data attribute indicating active state, used for CSS styling.
`disabled`	`boolean`	—	When true, disables the list item interaction.
`href`	`string`	—	URL that makes the list item render as an anchor link.
`interactableClassName`	`string`	—	CSS class applied to the inner `Interactable` wrapper (when `href` or `onClick` is provided).
`onClick`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Click handler that makes the list item interactive.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the root element.