Component reference
List
Select entries in an application-owned list.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Badge, List, ListItem } from "@pimolu/react";
function SelectableList() {
const [selected, setSelected] = useState("tokens");
const rows = [
{
id: "tokens",
title: "Design tokens",
description: "Primitives and semantic aliases",
},
{
id: "themes",
title: "Themes",
description: "Light, dark and six presets",
},
{
id: "components",
title: "Components",
description: "React, CSS and playground pages",
},
];
return (
<div className="grid gap-5 min-w-0">
<Badge variant="primary">
{selected}
</Badge>
<List variant="bordered">
{
rows.map((row) => (<ListItem
key={row.id}
title={row.title}
description={row.description}
active={selected === row.id}
end={selected === row.id
? (<Badge
variant="success"
>
selected
</Badge>)
: undefined}
onClick={() => setSelected(row.id)}
/>))
}
</List>
</div>
);
}
export function DemoExample() {
return (<SelectableList />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Variants and sizes
Enumerated from listVariantMap: plain, divided and bordered; sm, md and lg.
Team
A team composition using List.
Files
A files composition using List.
Usage
Use List for a linear collection; choose Table when columns carry meaningful relationships.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluListProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
variant | "plain" | "divided" | "bordered" | undefined | "divided" | Visual treatment. Defaults to "divided". |
size | "sm" | "md" | "lg" | undefined | "md" | Row density. Defaults to "md". |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLUListElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLUListElement> | undefined | — | Standard React/HTML attribute. |
variant"plain" | "divided" | "bordered" | undefinedDefault: "divided"
Visual treatment. Defaults to "divided".
size"sm" | "md" | "lg" | undefinedDefault: "md"
Row density. Defaults to "md".
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLUListElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLUListElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluListItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
description | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
start | ReactNode | — | Content shown before the main text. |
end | ReactNode | — | Content shown at the trailing edge. |
active | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
onClick | (() => void) | undefined | — | Make the row a button. |
children | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
onChange | ChangeEventHandler<HTMLLIElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
titleReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
descriptionReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
startReactNodeNo default extracted.
Content shown before the main text.
endReactNodeNo default extracted.
Content shown at the trailing edge.
activeboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
onClick(() => void) | undefinedNo default extracted.
Make the row a button.
childrenReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
onChangeChangeEventHandler<HTMLLIElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
Accessibility
- Check the selectable pattern's keyboard model and give each item an understandable name.