Item

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import Item from @prepared911/ui/item. Props are a union: link (href), clickable (onClick and no href), or static (neither).

Prop	Meaning
`href`	Link row. Navigation target.
`onClick`	Clickable row when `href` is omitted. Optional on a link row, after navigation intent.
`children`	Row content.
`icon`	Leading glyph at 16px.
`trailingIcon`	Trailing glyph at 16px.
`active`	Selected or pressed treatment. On a link, also `aria-current`.
`disabled`	Inert interaction.
`className`	Classes on the outer `li`.
`interactableClassName`	Classes on the inner link or button.
`ref`	Outer `li` in static mode; inner anchor or button in link and clickable modes.
`role`	Clickable only. Role of the button. Default is `button`.
`listItemRole`	Clickable only. `"none"` on the outer `li`.
`tabIndex`	Clickable only. Tab order of the button.
`aria-checked`	Clickable only. Checkable roles such as `menuitemcheckbox`.
`aria-selected`	Clickable only. The `option` role.

Shared interaction fields include id, aria-label, aria-description, aria-labelledby, aria-describedby, aria-controls, aria-expanded, aria-haspopup, aria-current, and the focus, keyboard, and pointer handlers listed on ItemInteractableProps.

Example

Props

Name	Type	Default	Description
`active`	`boolean`	—	Selected or pressed row treatment (not navigation `aria-current`).
`aria-checked`	`boolean \| "false" \| "mixed" \| "true"`	—	Checked state of the `button` for a checkable role such as `menuitemcheckbox`.
`aria-controls`	`string`	—	Id of the element controlled by this control.
`aria-current`	`boolean \| "false" \| "true" \| "page" \| "step" \| "location" \| "date" \| "time"`	—	Whether this item is current within a set.
`aria-describedby`	`string`	—	Id of the element that describes this control.
`aria-description`	`LocalizedMessage`	—	Accessible description when it cannot be referenced by id.
`aria-expanded`	`boolean`	—	Whether the controlled region is expanded.
`aria-haspopup`	`boolean \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree" \| "false" \| "true"`	—	Type of popup triggered by this control, if any.
`aria-label`	`LocalizedMessage`	—	Accessible name when the visible label is insufficient.
`aria-labelledby`	`string`	—	Id of the element that names this control.
`aria-selected`	`Booleanish`	—	Selected state of the `button` for the `option` role.
`children`	`ReactNode`	—	Row content. Compose {@link Text} with `foreground={Foreground.Inherit}` so label color follows the row.
`className`	`string`	—	Classes on the outer `li`.
`disabled`	`boolean`	—	Inert interaction.
`href`	`string`	—	Navigation target.
`icon`	`Glyph`	—	Leading icon at 16px (`IconSize.Small`), tinted by the row foreground.
`id`	`string`	—	Element `id` for ARIA relationships.
`interactableClassName`	`string`	—	Classes on the inner link or clickable surface.
`listItemRole`	`"none"`	—	Role of the outer `li`. Pass `"none"` when the owner's role requires its items to carry no list-item semantics, as `menu` does, so the `button` is the item.
`onClick`	`((event: MouseEvent<HTMLElement, MouseEvent>) => void) \| ((event: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Optional click handler after navigation intent. Activates the row.
`ref`	`Ref<HTMLElement>`	—	Ref to the outer `li` in static mode; to the inner anchor or `button` in link and clickable modes.
`role`	`AriaRole`	—	Role of the row's `button`. A collection owner sets the role its popup requires of its items, such as `menuitem`, `menuitemcheckbox` or `menuitemradio`; the `button` role is the default.
`tabIndex`	`number`	—	Tab order of the `button`. A roving-focus owner passes `-1` or `0` per item.
`trailingIcon`	`Glyph`	—	Trailing icon at 16px (`IconSize.Small`), tinted by the row foreground.

Storybook

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

DefaultOpens in a new tab

On this page

Item

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import Item from @prepared911/ui/item. Props are a union: link (href), clickable (onClick and no href), or static (neither).

Prop	Meaning
`href`	Link row. Navigation target.
`onClick`	Clickable row when `href` is omitted. Optional on a link row, after navigation intent.
`children`	Row content.
`icon`	Leading glyph at 16px.
`trailingIcon`	Trailing glyph at 16px.
`active`	Selected or pressed treatment. On a link, also `aria-current`.
`disabled`	Inert interaction.
`className`	Classes on the outer `li`.
`interactableClassName`	Classes on the inner link or button.
`ref`	Outer `li` in static mode; inner anchor or button in link and clickable modes.
`role`	Clickable only. Role of the button. Default is `button`.
`listItemRole`	Clickable only. `"none"` on the outer `li`.
`tabIndex`	Clickable only. Tab order of the button.
`aria-checked`	Clickable only. Checkable roles such as `menuitemcheckbox`.
`aria-selected`	Clickable only. The `option` role.

Example

Props

Name	Type	Default	Description
`active`	`boolean`	—	Selected or pressed row treatment (not navigation `aria-current`).
`aria-checked`	`boolean \| "false" \| "mixed" \| "true"`	—	Checked state of the `button` for a checkable role such as `menuitemcheckbox`.
`aria-controls`	`string`	—	Id of the element controlled by this control.
`aria-current`	`boolean \| "false" \| "true" \| "page" \| "step" \| "location" \| "date" \| "time"`	—	Whether this item is current within a set.
`aria-describedby`	`string`	—	Id of the element that describes this control.
`aria-description`	`LocalizedMessage`	—	Accessible description when it cannot be referenced by id.
`aria-expanded`	`boolean`	—	Whether the controlled region is expanded.
`aria-haspopup`	`boolean \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree" \| "false" \| "true"`	—	Type of popup triggered by this control, if any.
`aria-label`	`LocalizedMessage`	—	Accessible name when the visible label is insufficient.
`aria-labelledby`	`string`	—	Id of the element that names this control.
`aria-selected`	`Booleanish`	—	Selected state of the `button` for the `option` role.
`children`	`ReactNode`	—	Row content. Compose {@link Text} with `foreground={Foreground.Inherit}` so label color follows the row.
`className`	`string`	—	Classes on the outer `li`.
`disabled`	`boolean`	—	Inert interaction.
`href`	`string`	—	Navigation target.
`icon`	`Glyph`	—	Leading icon at 16px (`IconSize.Small`), tinted by the row foreground.
`id`	`string`	—	Element `id` for ARIA relationships.
`interactableClassName`	`string`	—	Classes on the inner link or clickable surface.
`listItemRole`	`"none"`	—	Role of the outer `li`. Pass `"none"` when the owner's role requires its items to carry no list-item semantics, as `menu` does, so the `button` is the item.
`onClick`	`((event: MouseEvent<HTMLElement, MouseEvent>) => void) \| ((event: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Optional click handler after navigation intent. Activates the row.
`ref`	`Ref<HTMLElement>`	—	Ref to the outer `li` in static mode; to the inner anchor or `button` in link and clickable modes.
`role`	`AriaRole`	—	Role of the row's `button`. A collection owner sets the role its popup requires of its items, such as `menuitem`, `menuitemcheckbox` or `menuitemradio`; the `button` role is the default.
`tabIndex`	`number`	—	Tab order of the `button`. A roving-focus owner passes `-1` or `0` per item.
`trailingIcon`	`Glyph`	—	Trailing icon at 16px (`IconSize.Small`), tinted by the row foreground.

Storybook

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

DefaultOpens in a new tab

On this page