Filter Chips

A multi-select row of tappable chips built on top of Tag, with a selection haptic per toggle.

ReanimatedHapticsNativeWindSource

Prerequisites

Filter Chips renders each chip through Tag, so it needs the same icon set as that component, plus haptics.


npx expo install @hugeicons/react-native expo-haptics

Install


npx @rslab/cli add filter-chips

Usage

import { FilterChips } from '@/components/ui/FilterChips';

const [filters, setFilters] = useState<string[]>(['remote']);

<FilterChips
  options={[
    { label: 'Remote', value: 'remote', emoji: '🌍' },

    { label: 'Full-time', value: 'full-time', emoji: '💼' },

    { label: 'Senior', value: 'senior', emoji: '⭐' },
  ]}

  value={filters}

  onChange={setFilters}
/>;

Any number of chips can be selected at once. Swap the accent color or disable the whole row while a filtered list is refetching:

<FilterChips
  options={roleOptions}

  value={roles}

  onChange={setRoles}

  activeColor="purple"

  disabled={isFetching}
/>

Props

PropTypeDefault

options

{ label: string; value: string; emoji?: string; icon?: HugeIcon }[]

-

One entry per chip.

value

string[]

-

Controlled array of currently-selected values.

onChange

(value: string[]) => void

-

activeColor?

'neutral''blue''green''red''yellow''purple'

'blue'

Tag's color for a selected chip. Applies to every chip in the row, not per-option.

disabled?

boolean

false

Fades every chip and blocks all taps.

haptic?

boolean

true

Mutes the selection tick when false.

className?

string

-

Extend or override the wrapping row.

How it works

Built on Tag, not a reimplemented pill. Tag stays a dumb, static component with no onPress of its own, so each chip here is a Tag wrapped in its own Pressable. FilterChips owns all the tap and selection logic; Tag just renders whatever color it's told.
Selection is just a color swap. A chip toggles between activeColor and "neutral" depending on whether its value is in the value array. Tag already handles its own mount animation correctly, so there's no extra motion to wire up, just a prop change.
selectionAsync(), not impactAsync(). Toggling a filter is picking from a set of options, the same haptic convention as a segmented control or radio group, not a one-off button press.
The array is the single source of truth. Toggling derives selected from value.includes(...) and either filters the value out or appends it, there's no local selection state duplicated alongside the controlled value prop.

Tuning

the wrapping row is a plain flex-row flex-wrap gap-2, swap gap-2 for tighter or looser chip spacing
activeColor applies to the whole row; if one specific chip needs its own color when selected, map over options and replicate the toggle logic by hand instead
hitSlop={4} on each chip's Pressable: bump it up if chips feel like a small target on dense layouts

See exactly how this works with an RSLAB subscription.

Get Pro

Filter Chips

Prerequisites

Install

Usage

Props

On this page