List Item

A flexible list item component with optional start/end boundary slots, selection support, and icon integration. Ideal for building option lists, menus, and selectable item groups.

Live Demo

Simple Item

Dashboard

With Start Icon

Inbox

With End Icon

Settings

With Icons on Both Sides

Payment Methods

Selectable

Email notifications

Chat notifications

Phone notifications

Selected: Email: false, Chat: false, Phone: false

Selectable with Custom Start Slot

When selectable is true, the start slot defaults to a checkbox. You can override it:

Custom start icon (still toggleable)

Usage

Basic

<orio-list-item>
  Simple text item
</orio-list-item>

With Start Icon

<orio-list-item>
  <template #start>
    <orio-icon name="mail" />
  </template>
  Inbox
</orio-list-item>

With End Icon

<orio-list-item>
  Settings
  <template #end>
    <orio-icon name="chevron-right" />
  </template>
</orio-list-item>

With Icons on Both Sides

<orio-list-item>
  <template #start>
    <orio-icon name="credit-card" />
  </template>
  Payment Methods
  <template #end>
    <orio-icon name="external-link" />
  </template>
</orio-list-item>

Selectable with v-model

<script setup>
const selected = ref(false);
</script>

<template>
  <orio-list-item selectable v-model:selected="selected">
    Toggle me
  </orio-list-item>
</template>

Props

Prop	Type	Default	Description
selectable	boolean	false	Enables click-to-toggle behavior and shows a checkbox in the start slot by default

Model

Model	Type	Description
selected	boolean	Two-way binding for the selection state. Use v-model:selected

Slots

Slot	Description
default	Main content of the list item
start	Left boundary — shown when provided, or when selectable is true (defaults to a checkbox)
end	Right boundary — only rendered when provided

Styling

--color-accent         /* Selected item background */
--color-accent-soft-darker  /* Selected item text color */
--color-surface        /* Hover background (non-selected) */