FilterChips

PreviousNext

Segmented filter chips (single or multi).

import { FilterChips, FilterChipItem } from "@/rl-ui";

<FilterChips type="single" defaultValue="all">
<FilterChipItem value="all">All</FilterChipItem>
<FilterChipItem value="active">Active</FilterChipItem>
</FilterChips>

Examples

Multiple selection

import { FilterChips, FilterChipItem } from "@/rl-ui";

<FilterChips type="multiple" defaultValue={["design"]}>
<FilterChipItem value="design">Design</FilterChipItem>
<FilterChipItem value="eng">Engineering</FilterChipItem>
<FilterChipItem value="cs">CS</FilterChipItem>
</FilterChips>

Sizes

import { FilterChips, FilterChipItem } from "@/rl-ui";

<>
<FilterChips type="single" size="medium" defaultValue="a">
  <FilterChipItem value="a">Medium</FilterChipItem>
  <FilterChipItem value="b">Alt</FilterChipItem>
</FilterChips>
<FilterChips type="single" size="large" defaultValue="a">
  <FilterChipItem value="a">Large</FilterChipItem>
  <FilterChipItem value="b">Alt</FilterChipItem>
</FilterChips>
</>

API

PropTypeDefaultDescription
type"single" | "multiple"—Selection mode.
variant"default" | "outline""default"Chip chrome.
size"medium" | "large""medium"Chip height.
valuestring | string[]—Controlled value.
defaultValuestring | string[]—Uncontrolled initial value.
onValueChange(value) => void—Selection change handler.
disabledbooleanfalseDisable the group.