Chip List

Chip lists lay out related chips in a semantic list so screen readers announce the collection and each item in order.

Try it

Usage

Wrap RuiChipListItem children inside RuiChipList. Place RuiChip inside each item for consistent styling.

import { RuiChipList, RuiChipListItem } from '@ecopages/radiant-ui/chip-list';
import { RuiChip } from '@ecopages/radiant-ui/chip';
 
<RuiChipList aria-label="Topics">
  <RuiChipListItem><RuiChip>React</RuiChip></RuiChipListItem>
  <RuiChipListItem><RuiChip>TypeScript</RuiChip></RuiChipListItem>
</RuiChipList>

Label the collection

Provide aria-label when the chip list is not described by a visible heading, for example, "Applied filters".

Theming

Chip List maps to semantic spacing roles, never Tailwind palette steps:

Item wrappers reset margin/padding only; chips style themselves via RuiChip. Override at the theme layer, not in component CSS.

API

RuiChipList and RuiChipListItem are presentational JSX views over <ul> / <li>, no custom element.

Props

CSS classes

Public BEM classes on the rendered elements (documented via @cssclass):

Theme roles

Accessibility

• The list renders with list semantics so assistive technologies enumerate each chip.
• Give the list an accessible name via aria-label or a visible heading referenced with aria-labelledby.
• Keep the number of chips manageable; truncate with a summary chip when the set grows large.