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
vue
<script setup lang="ts">
import { ItemListRow } from 'frappe-ui'
</script>

<template>
  <div class="flex w-[320px] flex-col gap-2 rounded-lg border border-outline-gray-2 bg-surface-modal p-2">
    <ItemListRow>
      Simple row with no prefix or suffix
    </ItemListRow>

    <ItemListRow active>
      <template #prefix>
        <span class="lucide-bell size-4 text-ink-gray-6" />
      </template>
      Active row with prefix
    </ItemListRow>

    <ItemListRow selected>
      <template #prefix>
        <span class="lucide-bell size-4 text-ink-gray-6" />
      </template>
      Selected row with suffix
      <template #suffix>
        <span class="lucide-check size-4 text-ink-gray-6" />
      </template>
    </ItemListRow>

    <ItemListRow disabled>
      <template #suffix>
        <span class="lucide-chevron-right size-4 text-ink-gray-6" />
      </template>
      Disabled row with suffix only
    </ItemListRow>
  </div>
</template>

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
}
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.

default
—
prefix
—
label
—
suffix
—
FormControlListView