List

SList is a presentational list of rows: settings, files, contacts, search results. Rows are SListItem — a title, an optional second line, and free slots at both ends for an icon, an avatar or a trailing action. The list keeps no state of its own: it frames the rows and sets their density.

It is neither a menu nor a picker. SDropdownMenu is a menu of commands that opens from a trigger and closes on choice. SListbox is a selection control: it owns a value, a v-model and keyboard navigation. SList does none of that — a row is interactive only when you make it a link (href) or an action (clickable).

Markup is div role="list" with div role="listitem" rows rather than ul/li: library markup stays neutral, so host styles cannot reach into it through tag selectors. A link or an action row keeps its own link/button role and is nested inside the listitem wrapper, so assistive technology announces both the position in the list and the control.

Basic usage

Plain rows with a title and a description. label gives the list an accessible name.

Storage almost full94% of 50 GB used

New device signed inChrome on macOS

Backup finished2 minutes ago

<template>
  <SList label="Notifications">
    <SListItem
      title="Storage almost full"
      description="94% of 50 GB used"
    />
    <SListItem
      title="New device signed in"
      description="Chrome on macOS"
    />
  </SList>
</template>

Dividers, icons and meta

variant="divided" separates the rows with a hairline; variant="bordered" frames the whole list instead. The icon prop puts an SIcon in front of the title, and the append slot holds trailing meta text or an action.

Quarterly report.pdfShared with 3 people2.4 MB

Meeting notes.txtOnly you860 KB

Drafts12 items—

<template>
  <SList
    variant="divided"
    label="Files"
  >
    <SListItem
      icon="file-text"
      title="Quarterly report.pdf"
      description="Shared with 3 people"
    >
      <template #append>2.4 MB</template>
    </SListItem>
    <SListItem
      icon="file-text"
      title="Meeting notes.txt"
      description="Only you"
    >
      <template #append>860 KB</template>
    </SListItem>
  </SList>
</template>

Links and actions

href renders the row as an <a>, clickable as a <button type="button">; both get the state layer, the pointer cursor and a focus ring. active marks the current row — on a link it also sets aria-current. disabled dims the row and takes it out of the tab order.

The as prop overrides the tag when the shorthands do not fit — as="label" for a row that wraps a checkbox, for instance. Anything else you pass (target, rel, @click) lands on the row, not on the listitem wrapper.

Profile

Billing

<template>
  <SList
    variant="bordered"
    label="Account"
  >
    <SListItem
      href="/profile"
      icon="user"
      title="Profile"
    />
    <SListItem
      href="/billing"
      icon="credit-card"
      title="Billing"
      active
    />
    <SListItem
      clickable
      icon="download"
      title="Export data"
      @click="exportData"
    />
    <SListItem
      clickable
      disabled
      icon="trash-2"
      title="Delete account"
    />
  </SList>
</template>

Avatars and actions in the slots

prepend and append take any markup, so a row can carry an avatar, a badge or a button. The default slot replaces the title and the description entirely when a row needs its own layout.

AMAlice Moreaualice@example.comOwner

JDJonas Dietrichjonas@example.com

<template>
  <SList
    variant="divided"
    label="Team"
  >
    <SListItem
      title="Alice Moreau"
      description="alice@example.com"
    >
      <template #prepend>
        <SAvatar
          fallback="AM"
          size="sm"
        />
      </template>
      <template #append>
        <SBadge color="positive">Owner</SBadge>
      </template>
    </SListItem>
  </SList>
</template>

Sizes

size on the list sets the density of every row: sm, md (default) or lg.

Small row

Another small row

Medium row

Another medium row

Large row

Another large row

<template>
  <SList
    size="sm"
    variant="bordered"
  >
    <SListItem
      icon="check"
      title="Small row"
    />
  </SList>
</template>

API

SList

Props

Name	Type	Default	Description
variant	| "bordered" | "plain" | "divided"	"plain"	Framing: plain draws nothing, bordered puts a border with rounded corners around the whole list, divided separates the rows with a hairline.
size	"md" | "sm" | "lg"	"md"	Row density: height, padding and text size of every SListItem inside.
label	string	undefined	Accessible name of the list. Set it when the surrounding markup does not already name the list — a screen reader announces it together with the number of rows.

Slots

Name	Description
default	Rows of the list, normally SListItem elements.

SListItem

Props

Name	Type	Default	Description
as	string	undefined	Tag of the row itself; the listitem wrapper around it stays a div. By default the row is a div, an a when href is set and a button when clickable is.
href	string	undefined	Link target: renders the row as an a and makes it interactive.
title	string	undefined	Row title (alternative to the title slot). Ignored when the default slot is filled.
description	string	undefined	Secondary line under the title (alternative to the description slot).
icon	string	undefined	Leading icon: a registry name or a raw SVG path. Ignored when the prepend slot is set.
active	boolean	false	Marks the row as the current one: accent color, aria-current on a link row.
clickable	boolean	false	Makes a plain row an action: it renders as a button and gets the interactive styling. A link row (href) is interactive without it.
disabled	boolean	false	Disables the row: dimmed, ignores the pointer and, for a link or a button row, the keyboard as well.

Slots

Name	Description
prepend	Leading content: an icon, an avatar or a checkbox. Overrides the icon prop.
default	Row content, replacing the title and the description.
title	Row title (instead of the title prop).
description	Secondary line (instead of the description prop).
append	Trailing content: meta text, a badge or an action button.