Chip

A compact interactive tag with two interaction modes: selectable (toggles on/off for filters) and removable (applied tags that can be cleared). Unlike Badge, Chip is interactive.

When to use: Filter bars, tag lists, multi-select category pickers, applied-filter indicators.

When not to use: Non-interactive labels — use Badge. Long phrases — Chip is optimized for 1-3 word labels. More than ~8 chips — consider a searchable multi-select instead.

Import

import { Chip } from '@/components';

Usage

// Selectable filter chip
<Chip label="React Native" isSelected={selected} onPress={() => toggle('rn')} />

// Removable tag chip
<Chip label="TypeScript" onRemove={() => removeTag('ts')} />

Props

Prop	Type	Default	Description
label	string	—	Display text (required)
isSelected	boolean	false	Selected / active state
onPress	() => void	—	Press handler (for filter chips)
onRemove	() => void	—	Renders × button; called on tap
variant	string	'default'	Color variant
isDisabled	boolean	false	Prevents interaction
testID	string	—	For testing

Filter chip group

const FILTERS = ['All', 'Active', 'Pending', 'Archived'];
const [active, setActive] = useState('All');

<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
  {FILTERS.map(f => (
    <Chip
      key={f}
      label={f}
      isSelected={active === f}
      onPress={() => setActive(f)}
    />
  ))}
</View>

Removable tag group

<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
  {tags.map(tag => (
    <Chip
      key={tag}
      label={tag}
      onRemove={() => removeTag(tag)}
    />
  ))}
</View>

Accessibility

• Role: button when onPress or onRemove is set
• isSelected maps to accessibilityState.selected

Related

• Badge — non-interactive status label
• TagInput — Chip list + text input for adding new tags