Props

Prop	Type	Default	Description
label	string | number	—	Primary text of the row. A string or a number truncates to one line; use the label slot for rich content.
description	string | number	—	Secondary text below the label, also truncated to one line. Use the description slot for several lines or rich content.
as	ItemElement (tag name or component)	'div'	What the root renders as. Give a component only when the row carries a role, so the parent owns keyboard access and the row adds no second tab stop, and only when no control sits in startContent or endContent.
align	'center' | 'start'	'center'	Vertical alignment of the start and end content slots.
density	'compact' | 'balanced' | 'spacious'	'balanced'	Spacing. compact uses 4px block padding, balanced 8px, and spacious 12px of block and inline padding.
layout	'stacked' | 'inline'	'stacked'	stacked puts the description on its own line. inline keeps both on one line, with the description ellipsizing first, so the row fits a fixed-height host.
labelLines	number	—	Maximum lines before the label truncates with an ellipsis. A string label truncates to one line when this is omitted.
descriptionLines	number	—	Maximum lines before the description truncates with an ellipsis. A string description truncates to one line when this is omitted.
onClick	(event: MouseEvent) => void	—	Click handler. It renders a button that fills the row's content area, so the row gains button semantics and the hover and pressed states. Write @click in a template.
interactiveRef	MaybeRefOrGetter<HTMLElement | null | undefined>	—	A ref to a control inside the row that already carries its keyboard access and action, such as a checkbox in startContent. The row becomes an enlarged click target that forwards surface clicks to that control and renders no button of its own. Mutually exclusive with onClick and href, which are ignored while it is set.
href	string	—	Link URL. A link element is rendered inside the row. When the root is already a link component (see as), the address goes on that root instead and no extra element is drawn.
target	'_blank' | '_self'	—	Link target, only used with href. _blank adds noopener and noreferrer automatically.
rel	string	—	Link relationship tokens, merged with the ones added automatically.
isDisabled	boolean	false	Disabled state. The row becomes inert and its content dims.
isSelected	boolean	false	Selected state. Written as aria-selected="true" when the row's role permits it, and as aria-current="true" otherwise.
isHighlighted	boolean	false	Paints the highlighted state, which is the appearance keyboard focus and hover use.
swipeActions	ItemSwipeActions	—	Verbs a sideways touch drag uncovers, per side, outermost last, each { label, icon?, onActivate, isDisabled?, variant?, hasRemoval? }. A mouse never starts the drag. Only on a row whose role permits interactive descendants, not on an option, a menu item, or the enlarged target of a native radio.
swipeBehavior	'reveal' | 'commit'	'reveal'	reveal rests the row open with every entry a real button and fires the outermost on a long drag; commit slides the row out and fires on release, with nothing left resting.

Slots

• marker: content before startContent, such as a list bullet or a counter.
• startContent: leading visual, such as an avatar, an icon, an image, or a checkbox.
• label: rich content replacing the label prop.
• description: rich content replacing the description prop.
• endContent: end-aligned content, such as badges, timestamps, or action buttons.

Exposed

element (the root element), focus(), and blur(). Focusing lands on the control inside the row that can actually take focus.