1 viewer
Component · Navigation
FilterChips
A row of filter links with an optional caption; the active chip is the current filter. Every chip is a plain link, so filtering works without JavaScript.
- Category
- Navigation
- Slots
- 4
- States
- 0
- Writer
- Shared
Preview
<FilterChips
ariaLabel="Order status"
items={[
{ count: 128, href: "?status=", label: "All" },
{ active: true, count: 12, href: "?status=open", label: "Open" },
{ count: 104, href: "?status=shipped", label: "Shipped" },
{ count: 12, href: "?status=refunded", label: "Refunded" }
]}
label="Status"
/>Change this declaration and watch it render:open FilterChips in the playground
Props
The inputs the shared writer reads. `data-*` and `aria-*` attributes pass through and are not listed.
| Prop | Type | Required | Default | Also written |
|---|---|---|---|---|
| ariaLabel | text | Optional | Filters | aria_label |
| id | text | Optional | — | — |
| items | json | Required | — | — |
| label | text | Optional | — | — |
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .cre8-filter-chips |
| label | .cre8-filter-chips__label |
| chip | .cre8-filter-chip |
| count | .cre8-filter-chip__count |
- Role
- navigation
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-navigation | ready |
| terminal | terminal-text | planned |
Accessibility
A labelled navigation landmark of links; the selection is announced, not shown by color alone.
- The nav carries an aria-label naming what the chips filter.
- The active chip carries aria-current="page".
- A count after a chip's label is text, read as part of the link.