List Item

<pa-list-item> | PaListItem

A versatile list item component for displaying structured content with optional icons, sub-labels, and interactive elements. Perfect for user lists, transaction records, menu items, and any content that benefits from a consistent list-based layout in your Vue 3 applications.

Usage

The list item component is designed to display structured information with optional iconography and interactive capabilities. Use it to create professional-looking lists with consistent spacing and styling.

John Smith

Account: MYOB444001

---

<template>
  <pa-list-item
    label="John Smith"
    sub-label="Account: MYOB444001"
    icon="user-solid"
    :is-clickable="true"
    @click="handleItemClick"
  />
</template>

<script setup>
const handleItemClick = (item) => {
  console.log('List item clicked:', item)
}
</script>

Examples

Basic List Item

A simple list item with just a label, perfect for basic lists and menu items.

Simple List Item

---

<template>
  <pa-list-item label="Simple List Item" />
</template>

With Icon

Add visual context with an icon to help users quickly identify content type.

Mastercard Banking

---

<template>
  <pa-list-item
    label="Mastercard Banking"
    icon="cc-mastercard-brand"
  />
</template>

With Sub-Label

Provide additional context or secondary information with sub-labels.

John Smith

MYOB444001

---

<template>
  <pa-list-item
    label="John Smith"
    sub-label="MYOB444001"
    icon="user-solid"
  />
</template>

Clickable Items

Make list items interactive for navigation or selection purposes. This example shows real-time interaction feedback when clicking on different types of list items.

John Smith

Account: MYOB444001

---

Annie Williams

Account: MYOB444002

---

Mastercard Banking

**** 1234

---

$5,000.00

Horseshoe bulk purchase

---

Last Action:

Click any item above...

<template>
  <div class="clickable-list">
    <pa-list-item
      label="John Smith"
      sub-label="Account: MYOB444001"
      icon="user-solid"
      :is-clickable="true"
      @click="handleUserClick"
    />
    <pa-list-item
      label="Annie Williams"
      sub-label="Account: MYOB444002"
      icon="user-solid"
      :is-clickable="true"
      @click="handleUserClick"
    />
    <pa-list-item
      label="Mastercard Banking"
      sub-label="**** 1234"
      icon="cc-mastercard-brand"
      :is-clickable="true"
      @click="handleAccountClick"
    />
    <pa-list-item
      label="$5,000.00"
      sub-label="Horseshoe bulk purchase"
      icon="receipt-light"
      action-icon="edit-solid"
      :is-clickable="true"
      @click="handleTransactionClick"
    />
  </div>
  
  <div class="last-action">
    {{ lastAction || 'Click any item above...' }}
  </div>
</template>

<script setup>
import { ref } from 'vue'

const lastAction = ref('')

const handleUserClick = (item) => {
  const label = item?.$props?.label || 'Unknown User'
  lastAction.value = `👤 Selected user: ${label}`
}

const handleAccountClick = (item) => {
  const label = item?.$props?.label || 'Unknown Account'
  lastAction.value = `💳 Opened account: ${label}`
}

const handleTransactionClick = (item) => {
  const label = item?.$props?.label || 'Unknown Transaction'
  lastAction.value = `📝 Editing transaction: ${label}`
}
</script>

With Action Icons

Add action icons to provide quick access to common operations like edit, delete, or view details.

$5,000.00

Horseshoe bulk purchase

---

<template>
  <pa-list-item
    label="$5,000.00"
    sub-label="Horseshoe bulk purchase"
    icon="receipt-light"
    action-icon="edit-solid"
    :is-clickable="true"
  />
</template>

List Group Example

Combine multiple list items to create comprehensive lists for user directories, transactions, or menu systems.

John Smith

MYOB444001

---

Annie Williams

MYOB444002

---

$5,000.00

Horseshoe bulk purchase

---

<template>
  <div class="user-list">
    <pa-list-item
      label="John Smith"
      sub-label="MYOB444001"
      icon="user-solid"
      :is-clickable="true"
    />
    <pa-list-item
      label="Annie Williams"
      sub-label="MYOB444002"
      icon="user-solid"
      :is-clickable="true"
    />
    <pa-list-item
      label="$5,000.00"
      sub-label="Horseshoe bulk purchase"
      icon="receipt-light"
      action-icon="edit-solid"
      :is-clickable="true"
    />
</template>

Text Truncation Control

Control text overflow behavior with the truncateLabels prop.

This is a very long label that might overflow the container width and cause layout issues if not properly handled

This is also a very long sub-label that demonstrates the truncation behavior

---

<template>
  <pa-list-item
    label="This is a very long label that might overflow the container"
    sub-label="This is also a very long sub-label"
    icon="user-solid"
    :truncate-labels="true"
  />
</template>

Custom Slot Content

Use the default slot to create completely custom list item layouts while maintaining consistent styling.

Premium Account

Custom layout with slot content

VIP

---

<template>
  <pa-list-item label="Premium Account">
    <div class="custom-content">
      <pa-icon icon="star-solid" class="star-icon" />
      <div class="content-text">
        <div class="main-text">Premium Account</div>
        <div class="sub-text">Custom layout with slot content</div>
      </div>
      <pa-badge variant="success">VIP</pa-badge>
    </div>
  </pa-list-item>
</template>

<style scoped>
.custom-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.star-icon {
  color: gold;
}

.main-text {
  font-weight: 600;
}

.sub-text {
  font-size: 0.875rem;
  color: #6b7280;
}
</style>

Importing

import { PaListItem } from '@payadvantage/ui-components'

Slots

Name	Description
(default)	Custom content for the list item. When used, overrides the default label/sub-label layout.

Properties

Name	Description	Reflects	Type	Default
label	The main text content for the list item.	no	string	Required
subLabel	Secondary text displayed below the main label.	no	string	''
isClickable	Makes the list item interactive with hover states and cursor pointer.	no	boolean	false
icon	FontAwesome icon name to display on the left side of the content.	no	string	''
actionIcon	FontAwesome icon name to display on the right side as an action indicator.	no	string	''
truncateLabels	Controls whether long labels should be truncated with ellipsis.	no	boolean	true
title	HTML title attribute for the main label (useful for accessibility when truncated).	no	string	null

Events

Name	Description	Event Detail
click	Emitted when the list item is clicked (mouse or keyboard). Only fires when isClickable is true.	The component instance

Dependencies

• PaIcon: Used for displaying icons when icon or actionIcon props are provided.

Accessibility

• Supports keyboard navigation with Space and Enter keys when isClickable is true
• Prevents default scrolling behavior when Space key is used
• Uses proper HTML title attributes for truncated text
• Maintains semantic structure for screen readers

Styling Notes

• List items include a bottom border (<hr>) by default for visual separation
• The .is-clickable class is automatically applied when isClickable is true
• Text truncation uses CSS text-truncate class when truncateLabels is enabled
• Icon spacing and alignment is automatically handled by the component