List
A flexible list component supporting both ordered and unordered lists with customizable styling, markers, and variants. Perfect for displaying structured content and navigation items.
Installation
Import
Usage
Use List for displaying structured content and navigation items. Choose variant='unordered-disc', 'unordered-circle', or 'unordered-square' for unordered lists. Choose variant='ordered-decimal', 'ordered-roman', 'ordered-upper-roman', 'ordered-alpha', or 'ordered-upper-alpha' for ordered lists. Use variant='none' to remove markers. The component prop automatically defaults to 'ol' for ordered variants and 'ul' for unordered variants. Lists are flex containers by default, making it easy to add gaps between items using the gap style prop. Use clickable variant for interactive items and selectable variant for selection scenarios. Use selected and focused states to indicate active items. Disabled state automatically handles styling for clickable and selectable variants.
Design Guidelines
Maintain consistent list styling throughout your application. Use appropriate sizes (sm, md, lg, xl) for your content density. Use font weights (normal, medium, semibold, bold) to create visual hierarchy. Group related items visually. Use clickable or selectable variants for interactive items. Provide clear visual feedback for selected and focused states. Use colors semantically to convey meaning.
Basic Usage
Simple unordered and ordered lists with visible markers
List with Spacing
Adding gaps between list items using style props
List Variants and Markers
Different list variants with built-in marker styles
Clickable and Selectable Items
List items with clickable and selectable variants
List Item Sizes and Weights
List items with different sizes and font weights
Lists with Icons and Badges
Enhanced lists with icons, badges, and visual indicators
Navigation Menu
Navigation menu using clickable list items
List Item Colors
List items with different color schemes
Selectable List
Selectable list with state management
Nested Lists
Hierarchical lists with different markers for each level
List
Main list container (renders as ul or ol) packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
component | "ul" | "ol" | "ul" | HTML element to render the list as |
variant | "unordered-disc" | "unordered-circle" | "unordered-square" | "ordered-decimal" | "ordered-roman" | "ordered-upper-roman" | "ordered-alpha" | "ordered-upper-alpha" | "none" | "none" | Visual variant of the list. Unordered variants (disc, circle, square) render as ul. Ordered variants (decimal, roman, upper-roman, alpha, upper-alpha) render as ol. Use "none" to remove markers. |
role | string | — | ARIA role for accessibility (e.g., "listbox" for selectable lists) |
selectable | boolean | false | Whether this list is used for selection (adds selection-related ARIA attributes) |
className | string | — | packages.commonProps.className.description |
ListItem
Individual list item packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
variant | "default" | "clickable" | "selectable" | "default" | Visual variant of the list item. "clickable" for hover/focus styles, "selectable" for selection states |
itemSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the list item text |
weight | "normal" | "medium" | "semibold" | "bold" | "normal" | Font weight of the list item |
color | "default" | "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "neutral" | "default" | Color scheme of the list item text |
selected | boolean | false | Whether this item is currently selected (adds selected styling) |
focused | boolean | false | Whether this item is currently focused (adds focus styling) |
disabled | boolean | false | Whether this item is disabled (adds disabled styling and prevents interaction) |
value | string | — | Value this item represents (for selection scenarios) |
onSelect | (value?: string) => void | — | Callback fired when this item is selected/clicked |
role | string | — | ARIA role for accessibility (e.g., "option" for listbox items) |
className | string | — | packages.commonProps.className.description |
Accessibility
Accessibility features and considerations
Lists include proper ARIA attributes. Use role='listbox' for selectable lists. Use selectable prop for selection-related ARIA attributes. Ensure list items have descriptive content. Use selected and focused states appropriately for keyboard navigation. Set role='option' on ListItem when used in listbox context.