Chip

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/chip.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/chip.

Usage

import { useState } from "react";
import { ChipGroup } from "@/components/goodui-native/chip/chip";

type Slot = "09:00" | "10:30" | "13:00" | "15:30";

export function TimeSlots() {
  const [slot, setSlot] = useState<Slot[]>(["10:30"]);
  return (
    <ChipGroup<Slot>
      accessibilityLabel="Appointment time"
      value={slot}
      onValueChange={setSlot}
      options={[
        { value: "09:00", label: "9:00" },
        { value: "10:30", label: "10:30" },
        { value: "13:00", label: "1:00 PM" },
        { value: "15:30", label: "3:30 PM", disabled: true },
      ]}
    />
  );
}

When to use

Examples

<ChipGroup
  mode="multiple"
  layout="scroll"
  max={3}
  defaultValue={["open"]}
  accessibilityLabel="Filters"
  contentContainerStyle={{ paddingHorizontal: 16 }}
  options={[
    { value: "open", label: "Open now" },
    { value: "near", label: "Under 2 km" },
    { value: "cheap", label: "€" },
    { value: "vegan", label: "Vegan" },
    { value: "rated", label: "4.5+" },
  ]}
/>

{recipients.map((r) => (
  <Chip key={r.id} label={r.name} onRemove={() => setRecipients((all) => all.filter((x) => x.id !== r.id))} />
))}

<Chip label="Only refundable" selected={refundable} onSelectedChange={setRefundable} />

API reference

Motion and haptics

• •Selecting fills the chip and recolors the label with a timing; the check slot opens on the snappy spring and the check draws itself in. With a leading icon, the check crossfades in its place.
• •Single-mode ChipGroup: one accent highlight travels between chips. The edge in the direction of travel leads on the snappy spring and the trailing edge follows on smooth, so it stretches and settles; top and height follow on morph when it changes lines.
• •Press scales the chip to 0.95 on the snappy spring from touch down.
• •Remove: the chip's real width closes while it fades and scales to 0.8, then onRemove runs, so neighbors slide over.
• •In the scroll layout the row scrolls the newly selected chip into view.
• •Reduced motion: the highlight jumps, the check appears without drawing, removal is a fade, no press scale.

• •Haptic: select when a chip toggles or the group selection changes (configurable with haptic)
• •Haptic: warning when a selection is refused at max
• •Haptic: tap on remove

• •Colors, the highlight and removal run on the UI thread. Chip layouts are measured once per real change; the highlight only moves when the selection or the selected chip's box changes.

Accessibility

• •A toggle Chip is a checkbox; in a ChipGroup chips are radios (single mode, inside a radiogroup) or checkboxes (multiple), with checked and disabled in accessibilityState.
• •Action chips are buttons; chips with neither are read as text.
• •The × is its own button labelled 'Remove <label>', and removal is announced.
• •Hitting the max in multiple mode is refused with a warning haptic and announced ('Choose up to 3').
• •Chips are 32 or 36 pt tall with a vertical hitSlop up to 44 pt.

Notes for AI

Related