ItemListRow

ItemListRow is the shared row primitive used internally by Dropdown, Select, Combobox, and MultiSelect for consistent row presentation.

Use it directly when you need to compose a custom listbox or menu surface but still want the design-system row styling, prefix/label/suffix regions, and active/selected/disabled states.

Row states

Simple row with no prefix or suffix
Active row with prefix
Selected row with suffix
Disabled row with suffix only

API Reference

Show types
typescript
import type { Component } from 'vue'

export type ItemListSize = 'sm' | 'md' | 'lg' | 'xl'

export interface ItemListRowProps {
  /** Element tag or component used for the row wrapper. */
  as?: string | Component

  /** Shared row density preset. */
  size?: ItemListSize

  /** Highlights the row as the current active target. */
  active?: boolean

  /** Highlights the row as selected. */
  selected?: boolean

  /** Disables interaction and applies muted styling. */
  disabled?: boolean
}
Prop Default Type
as
"div"
string | Component

Element tag or component used for the row wrapper.

size
"sm"
ItemListSize

Shared row density preset.

active
false
boolean

Highlights the row as the current active target.

selected
false
boolean

Highlights the row as selected.

disabled
false
boolean

Disables interaction and applies muted styling.

Slot Payload
default
prefix
label
suffix