FilterChip

Needs review
WCAG 2.2 evidence
RTL

A compact filter control. By default a React Aria ToggleButton: aria-pressed, Space and Enter toggle, the selected chip shows a check icon and a tinted fill (WCAG 1.4.1, 2.1.1, 4.1.2). With hasDropdown it is a menu button that opens the library's Menu (arrow keys, type-ahead, Escape returns focus; selection with selectionMode), shows a chevron, and states in its name when a value is chosen. Keyboard focus shows the shared ring (2.4.7); the 32 px chip with its label is the whole target (2.5.8). Group several chips with a label: role="group" with aria-label, or React Aria Toolbar (arrow keys between chips) or ToggleButtonGroup (give each toggle chip an id). Consumer duties: group label and chip wording; announcing how many results a filter change leaves (for example with announceStatus, WCAG 4.1.3).

import { FilterChip } from "@nexera-ui/react";

Loading example…

4
examples: 34
props: 6
live controls: 1
platform: 7
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

hasDropdownfalse

children

defaultOpenfalse

placement

isSelectedfalse

isDisabledfalse

Generated code

import { FilterChip } from "@nexera-ui/react";

<FilterChip />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

Dropdown

Figma Dropdown=Yes: the chip opens the library's Menu; a chosen value marks it selected.

Loading example…

app.tsx

import { FilterChip, MenuItem } from "@nexera-ui/react";

export function Dropdown() {
  return (
    <FilterChip label="Department" hasDropdown selectionMode="multiple">
      <MenuItem id="eng" label="Engineering" />
      <MenuItem id="design" label="Design" />
      <MenuItem id="people" label="People" />
      <MenuItem id="finance" label="Finance" />
    </FilterChip>
  );
}

Filter bar

A filter bar: a labelled React Aria Toolbar (Tab enters once, arrow keys move between chips), toggle chips and a dropdown chip whose label shows the chosen values. Chips wrap onto new lines in narrow containers.

Loading example…

app.tsx

import { useState } from "react";
import { Toolbar, type Selection } from "react-aria-components";
import { FilterChip, MenuItem } from "@nexera-ui/react";

export function FilterBar() {
  const [departments, setDepartments] = useState<Selection>(new Set(["eng"]));
  const count = departments === "all" ? 4 : departments.size;
  return (
    <Toolbar aria-label="Filters" className="flex flex-wrap gap-2">
      <FilterChip label="Remote" defaultSelected />
      <FilterChip label="Full time" />
      <FilterChip label="Contract" isDisabled />
      <FilterChip
        label={count > 0 ? `Department: ${String(count)}` : "Department"}
        hasDropdown
        selectionMode="multiple"
        selectedKeys={departments}
        onSelectionChange={setDepartments}
      >
        <MenuItem id="eng" label="Engineering" />
        <MenuItem id="design" label="Design" />
        <MenuItem id="people" label="People" />
        <MenuItem id="finance" label="Finance" />
      </FilterChip>
    </Toolbar>
  );
}

Long label and right to left

Long labels wrap inside the chip (it grows from 32 px); right-to-left layouts mirror padding and icons.

Loading example…

app.tsx

import { FilterChip, MenuItem } from "@nexera-ui/react";

export function LongLabelAndRightToLeft() {
  return (
    <div className="flex max-w-xs flex-col items-start gap-4">
      <FilterChip label="Employees on extended parental or medical leave" defaultSelected />
      <div dir="rtl" lang="ar" className="flex flex-wrap gap-2">
        <FilterChip label="عن بعد" defaultSelected />
        <FilterChip
          label="القسم"
          hasDropdown
          selectionMode="single"
          selectedLabel="تم تطبيق عامل التصفية"
        >
          <MenuItem id="eng" label="الهندسة" />
        </FilterChip>
      </div>
    </div>
  );
}

Props 34

Press "Try it" on a card to load that prop into the playground.

hasDropdownNexera

boolean

Opens a menu of options instead of toggling. Opens a menu of options instead of toggling.

childrenNexera

ReactNode

Only for a dropdown chip. The options: MenuItem elements (and MenuDivider, MenuSection).

label*Nexera

VisibleContent

Visible label, for example "Remote" or "Department". It is the accessible name; it wraps instead of truncating. On a dropdown chip, consider showing the chosen value ("Department: Engineering").

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style.

selectedLabelNexera

string

Text added to the accessible name while the chip is selected, because a menu button has no selected state of its own ("Department (filter applied)"). Visually hidden. Translate it.

isOpenNexera

boolean

Whether the menu is open (controlled). Use with onOpenChange.

defaultOpenNexera

boolean

Whether the menu is open on first render (uncontrolled).

onOpenChangeNexera

(isOpen: boolean) => void

Called when the menu opens or closes.

placementNexera

"bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom"

Where the menu opens relative to its trigger. It flips to stay inside the viewport. Submenus default to "end top", which mirrors in right-to-left layouts.

idReact Aria

Key

When used in a ToggleButtonGroup, an identifier for the item in selectedKeys. When used standalone, a DOM id. The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

isSelectedReact Aria

boolean

Whether the element should be selected (controlled). Shows the chip as Selected: a value is chosen. Defaults to whether the menu has a selection (selectedKeys / defaultSelectedKeys).

defaultSelectedReact Aria

boolean

Whether the element should be selected (uncontrolled).

onChangeReact Aria

(isSelected: boolean) => void

Handler that is called when the element's selection state changes.

isDisabledReact Aria

boolean

Whether the button is disabled.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

formReact Aria

string

The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form).

nameReact Aria

string

Submitted as a pair with the button's value as part of the form data.

valueReact Aria

string

The value associated with the button's name when it's submitted with the form data.

typeReact Aria

"button" | "submit" | "reset"

The behavior of the button when used in an HTML form.

selectionModeReact Aria

"none" | "single" | "multiple"

The type of selection that is allowed in the collection.

selectedKeysReact Aria

"all" | Iterable<Key>

The currently selected keys in the collection (controlled).

defaultSelectedKeysReact Aria

"all" | Iterable<Key>

The initial selected keys in the collection (uncontrolled).

onSelectionChangeReact Aria

(keys: Selection) => void

Handler that is called when the selection changes.

disallowEmptySelectionReact Aria

boolean

Whether the collection allows empty selection.

onActionReact Aria

(key: Key, value: object) => void

Handler that is called when an item is selected.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-pressed
data-selected

Usage

<FilterChip className="data-disabled:opacity-90 shadow-sm" />

Theme studio

FilterChip

Try every prop. Copy the code.

Examples 3

Filter bar

Long label and right to left

Props 34

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components