NL Filter
betaType what you want to see, get filter chips you can edit or remove. The app can supply the parser; a plain field:value one ships.
- Data
- 5 files
- No extra npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add nl-filterNo npm packages are needed beyond what Dowel already requires.
import { NlFilter } from "@/components/ui/nl-filter";Default
Model Parser
Not Understood
Controlled
<NlFilter>
| Prop | Type | Default |
|---|---|---|
fields (required)What can be filtered on. | FilterField[] | — |
defaultValueInitial chips when uncontrolled. | FilterChip[] | — |
disabled | boolean | false |
hintHelp under the field. Defaults to an example built from | ReactNode | — |
inputPropsPassed to the text field. Its ref stays the filter's own, for focus after a removal. | Omit< ComponentPropsWithRef<"input">, "value" | "defaultValue" | "disabled" | "ref" > | — |
labelNames the field. | string | "Filter" |
onValueChange | (chips: FilterChip[]) => void | — |
parseTurns text into filters. Defaults to | FilterParser | parseFilterText |
placeholder | string | "Describe what to show" |
searchFieldA text field's key. When set, text that was not understood can be added as "<field> contains <text>" in one click, so a failed reading still narrows the list. | string | — |
valueControlled chips. | FilterChip[] | — |
Plus every attribute of <div> except children, defaultValue, onChange.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes