Z

ListItem

A flexible list item component for displaying structured content with optional icon, subtitle, and metadata. Supports selected states and can be interactive (clickable) or static.

Basic List Items

With Icons

Selected State

Non-Clickable (Static)

Static list item
This item is not interactive
Read-only information
Display only, no interaction
Info

Real-World Examples

Notification List

Settings Menu

Usage Example








    
        
    
    

        
        

    Read-only item

        
        
                    

    Display only

Props

Prop Type Default Description
title string required Main title text
subtitle string|null null Optional subtitle text
meta string|null null Right-side metadata (time, status, etc.)
icon string|null null Leading icon name
selected boolean false Selected/active state
clickable boolean true Whether item is interactive
class string '' Additional CSS classes

Key Features

Flexible Layout

Supports icon, title, subtitle, and meta in a responsive layout

Interactive States

Hover, focus, and selected states with smooth transitions

Semantic HTML

Renders as button when clickable, div when static

Text Truncation

Long text automatically truncates with ellipsis

Accessibility Features

Semantic Elements:

  • Clickable items render as button elements
  • Static items render as div elements
  • Proper button type attribute for interactive items

Keyboard Navigation:

  • Clickable items are fully keyboard accessible
  • Clear focus indicators with ring offset
  • Smooth transitions for all interactive states

Visual Hierarchy:

  • Clear distinction between selected and unselected states
  • Sufficient color contrast for all text elements
  • Icon colors adapt to selected state