Item

Shared start content, label, description, and end content row primitive.

Examples

Default

Item labelSupporting text

<Item description="Supporting text" label="Item label" />

With Slots

Item labelSupporting textAdmin

<Item
  {...args}
  endContent={<Badge label="Admin" />}
  startContent={<Icon color="secondary" icon={User} size="sm" />}
/>

End Content Inline

Beta featuresNewSupporting text

<Item
  description="Supporting text"
  label="Beta features"
  endContent={<Badge color="blue" label="New" />}
  endContentPosition="inline"
/>

Interactive

Item labelSupporting text

<Item
  description="Supporting text"
  label="Item label"
  onClick={() => {}}
  endContent={<Icon icon={ChevronRight} size="sm" />}
/>

Disabled States

Static disabled

Button disabled

Link disabled

<div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
  <Item isDisabled label="Static disabled" />
  <Item isDisabled label="Button disabled" onClick={() => {}} />
  <Item href="/disabled" isDisabled label="Link disabled" />
</div>

Selected

Selected itemSupporting text

<Item
  description="Supporting text"
  label="Selected item"
  isSelected
  startContent={<Icon color="primary" icon={Check} size="sm" />}
/>

Highlighted

Highlighted itemSupporting text

<Item description="Supporting text" label="Highlighted item" isHighlighted />

Link Item

Account settingsSupporting text

<Item
  description="Supporting text"
  label="Account settings"
  endContent={<Icon icon={ChevronRight} size="sm" />}
  href="/settings"
/>

Align Start

NEWMulti-line item with start alignmentA longer description wraps across multiple lines so the icon remains aligned to the start of the text block.

<Item
  description="A longer description wraps across multiple lines so the icon remains aligned to the start of the text block."
  label="Multi-line item with start alignment"
  align="start"
  startContent={<Badge label="NEW" />}
/>

Truncation

This is a very long item label that is intentionally constrained to one lineThis description is intentionally long enough to wrap across several lines, but the story limits it to two lines so consumers can see the truncation behavior.

<Item
  description="This description is intentionally long enough to wrap across several lines, but the story limits it to two lines so consumers can see the truncation behavior."
  label="This is a very long item label that is intentionally constrained to one line"
  descriptionLines={2}
  labelLines={1}
  style={{maxWidth: 360}}
/>

Polymorphic

• List itemRendered as an li for list composition.
• Second list itemAnother list row using the same primitive.

<ul style={{listStyle: 'none', margin: 0, padding: 0}}>
  <Item
    as="li"
    description="Rendered as an li for list composition."
    label="List item"
  />
  <Item
    as="li"
    description="Another list row using the same primitive."
    label="Second list item"
  />
</ul>

Start Adornment

Item with external markerSupporting text

<Item
  description="Supporting text"
  label="Item with external marker"
  leadingContent={<Icon color="secondary" icon={Circle} size="sm" />}
  startContent={<Icon color="secondary" icon={GripVertical} size="sm" />}
/>

Combined States

Disabled and selected

Highlighted and selected

Highlighted interactive

<div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
  <Item isDisabled isSelected label="Disabled and selected" />
  <Item isHighlighted isSelected label="Highlighted and selected" />
  <Item
    isHighlighted
    label="Highlighted interactive"
    onClick={() => {}}
    startContent={<Icon color="secondary" icon={Bell} size="sm" />}
  />
</div>

Option Role

Ada Lovelace

Grace Hopper

<div aria-label="People" role="listbox">
  <Item
    isSelected
    label="Ada Lovelace"
    onClick={() => {}}
    role="option"
    startContent={<Icon color="secondary" icon={User} size="sm" />}
  />
  <Item
    label="Grace Hopper"
    onClick={() => {}}
    role="option"
    startContent={<Icon color="secondary" icon={User} size="sm" />}
  />
</div>

API

Item

Shared start content, label, description, and end content row primitive.

Prop	Type	Default	Description
align	"center" | "start"	'center'	Vertical alignment of the start and end content slots.
aria-current	AriaAttributes['aria-current']	—	ARIA current indicator forwarded to the interactive element.
as	"div" | "li" | "span"	'div'	HTML element used for the root.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
description	ReactNode	—	Supporting text shown below the label.
descriptionLines	number	—	Maximum number of description lines before truncation.
endContent	ReactNode	—	Content rendered after the label and description. Position controlled by endContentPosition.
endContentPosition	'end' | 'inline'	'end'	Where to place endContent within the item. 'end' pushes it to the trailing edge; 'inline' keeps it next to the label.
href	string	—	Link URL. When set, the content area renders as a link.
isDisabled	boolean	false	Whether the item is disabled.
isHighlighted	boolean	false	Whether the item should show highlighted styling.
isSelected	boolean	false	Whether the item is selected.
label*	ReactNode	—	Primary item label.
labelLines	number	—	Maximum number of label lines before truncation.
leadingContent	ReactNode	—	Content rendered outside the interactive area, before it.
linkComponent	LinkComponentType	—	Custom link component used when href is set.
onClick	MouseEventHandler<HTMLElement>	—	Click handler. When set without href, the content area renders as a button. When set with href, also fires on link clicks.
ref	Ref<HTMLElement>	—	Ref forwarded to the root element.
rel	string	—	Link relationship. noopener noreferrer are added for _blank targets.
role	string	—	ARIA role applied to the root element. When set, click handling is attached to the root so parent composite widgets can own keyboard behavior.
startContent	ReactNode	—	Leading visual content, such as an icon, avatar, or image.
style	CSSProperties	—	Inline styles applied to the root element.
target	string	—	Link target.
trailingContent	ReactNode	—	Content rendered outside the interactive area, after it.
width	'full' | 'auto'	'full'	Width of the root element.