All components (204)

List

Typography · List

What it is and when to use it

A text list: bulleted, numbered or with its own icon.

When to use it

To enumerate: advantages, requirements, steps of an explanation.
marker="number" only when the order MEANS something (steps, rankings). Otherwise, a bullet; none removes it along with the indentation.
icon puts the same icon on all entries, and each entry can carry its own. spacing="tight" tightens a long list inside a card.

When not to

For pairs of label and value (a record), DataList.
For a list from which something is chosen, SelectableList; and if there are thousands of rows, VirtualList.
For the steps of a process with a status, Steps.

Keyboard: it does not take part. It is not interactive.

Accessibility: when the bullet is removed with list-style: none, Safari with VoiceOver stops announcing it as a list and the "list of 5 items" is lost. That is why, without a bullet, the component restores role="list" and role="listitem" by hand. The icon is marked as decorative: a green cross cannot be the only thing that says "included".

Fine-tuning: --amset-text-list-gap, --amset-text-list-indent and --amset-text-list-marker.

What it looks like

24-hour shipping to mainland Spain
Free returns for 30 days
Two-year warranty

Choose the products
Confirm the address
Pay

Automatic invoices
Five users

<List
  label="What shipping includes"
  items={[
    { content: '24-hour shipping to mainland Spain' },
    { content: 'Free returns for 30 days' },
  ]}
/>
<List label="How to buy" marker="number" items={pasos} />
<List label="Plan benefits" icon={<CheckIcon />} items={ventajas} />

Props

Import it with import { List } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`items`required	`readonly ListItem[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`icon`	`ReactNode`	Icon for all entries. Each entry can set its own.
`label`	`string`	Name of the list, when it needs to be distinguished from another beside it.
`marker`	`"number" \| "none" \| "bullet"`	`bullet` is an unordered list, `number` an ordered one (and there the order MEANS something: steps, rankings), `none` removes the bullet and the indentation.
`size`	`"sm" \| "md" \| "lg"`	—
`spacing`	`"normal" \| "tight"`	`tight` for a long list inside a card.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: