Chip

Installation

pnpm add @advui/core

npm install @advui/core

Usage

import { Chip } from '@advui/core'

<Chip selected={vegan} onSelectedChange={setVegan}>Vegan</Chip>   // filter chip
<Chip onRemove={() => remove(name)}>{name}</Chip>                 // input chip
<Chip icon={<CalendarIcon />} onPress={schedule}>Schedule</Chip>  // action chip

Examples

API reference

Accessibility

• Filter chips are toggle buttons: aria-pressed on web, a toggle button with a checked state on iOS and Android. Group them with a labelled role="group".
• The selected state is shown by color and a check mark, not color alone.
• Input chips keep their text and a separate remove button named “Remove Ada Lovelace”, so the action is clear and has its own focus stop.
• After a remove button removes its chip, focus moves to the next input chip in the row, or the previous one after the last, on every platform (unless the app has moved it). Otherwise focus is lost with the chip, and TalkBack and VoiceOver start again from the top of the screen.
• A disabled chip still takes touches on iOS and Android, so TalkBack finds it by touch and reads it as disabled; it ignores presses.
• Action chips are buttons. Chips without an action are plain text.

Responsive behavior

Chips keep one line; put them in a wrapping row (flexWrap="wrap").

Platform notes

Related components