Chip group
Filter by a few facets with chips that morph as you pick them.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Spring motion cheat sheetJasmine Brooks · Template
- Reduced motion patternsAva Mitchell · Guide
- Prototyping gestures in FramerMarcus Johnson · Video
- +1 more
- Facet filters people toggle often, like topics or categories.
- Single clearable choices shown as chips, via multiple={false}.
- Long option sets folded behind a +N more chip with maxVisible.
- Use multi-select when space is tight.
- Use checkbox in forms.
- Use segmented-control for one choice among a few views.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ChipGroup } from 'animui/chip-group';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { ChipGroup } from "animui/chip-group"; export function TopicFilter() { const [topics, setTopics] = useState<string[]>([]); return ( <ChipGroup label="Topics" value={topics} onValueChange={setTopics} maxVisible={4} options={["Design", "Motion", "Code", "Research", "Writing"].map((t) => ({ value: t.toLowerCase(), label: t }))} /> );}ChipGroup
Toggleable filter chips that morph when selected and fold long sets behind a +N more chip.
PropTypeDefaultDescription
optionsRequired{ value: string; label: string }[]–Chips in order.valueRequiredstring[]–Selected values.onValueChangeRequired(value: string[]) => void–Called with the new selection, in option order.labelRequiredstring–Accessible name of the group, such as "Topics".multiplebooleantrueAllow several chips. In single mode the selected chip can still be cleared.maxVisiblenumberInfinityChips shown before the rest fold. Selected chips always stay in view.classNamestring–Added to the group.- Arrow keys
- Move focus between chips and the more chip, wrapping.
- HomeorEnd
- Focus the first or last chip.
- EnterorSpace
- Toggles the focused chip or opens the overflow.
- The group has role="group" and aria-label; each chip is a button with aria-pressed.
- Roving tabindex keeps one chip in the tab order; the more chip uses aria-expanded.
- Check icons and surfaces are aria-hidden.
- Selecting grows a check in, slides the label over, and springs the chip edge while neighbours glide to new places, even across lines. Revealed chips stagger in and the group height morphs.
- Reduced motion replaces the morphs with short fades.
- Chips wrap onto new lines and the frame height follows on a spring.
- Selected chips always stay visible, even beyond maxVisible, so folding never hides active filters.
- Every chip has layout position animation and its own ResizeObserver; keep sets to a few dozen and fold the rest.
- Revealed chips stagger in, capped at 0.3s total.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for facet filters people toggle often. Use multi-select when space is tight and checkbox in forms.
- Always controlled. Set multiple={false} for a single, clearable choice.
- Exported as both named and default.
The full library index for assistants is at /llms.txt.