Skip to content
v0.2.10

List

Native ordered or unordered content with token spacing and optional markers.

Preview
  • Install the matching packages.
  • Import the stylesheet.
  • Compose with Flood.

Use List

List is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
list.tsxTSX
"use client";

import { FloodRoot, List } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <List><li>Install the matching packages.</li><li>Import the stylesheet.</li><li>Compose with Flood.</li></List>
    </FloodRoot>
  );
}

Design notes

  • Supply native li children. ordered chooses ol; start/reversed apply only to ordered lists. start must be a safe integer.
  • Hiding markers retains an explicit list role for browser/assistive-technology consistency. Content may include links or controls without changing its content-list semantics.
  • This is not ListBox, a selection model or a keyboard-navigation engine.
  • Available in 0.2.4; use matching installed declarations.

API reference

PropValuesDefault
orderedbooleanfalse
startnumber—
reversedboolean—
markerbooleantrue
gap"0" | "1" | "2" | "3" | "4" | "6" | "8" | "12""2"
Native HTML propsOmit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "role">Forwarded
View TypeScript source