Select

Installation

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

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

Usage

import { useState } from "react";
import { Select } from "@/components/goodui-native/select/select";

export function CountryField() {
  const [country, setCountry] = useState<string[]>([]);
  return (
    <Select
      label="Country"
      placeholder="Choose a country"
      value={country}
      onValueChange={setCountry}
      options={[
        { value: "de", label: "Germany", section: "Europe", keywords: ["DE", "Deutschland"] },
        { value: "fr", label: "France", section: "Europe" },
        { value: "tr", label: "Türkiye", section: "Europe" },
        { value: "us", label: "United States", section: "Americas", keywords: ["USA"] },
        { value: "br", label: "Brazil", section: "Americas" },
      ]}
    />
  );
}

When to use

Examples

<Select
  mode="multiple"
  label="Assignees"
  max={3}
  value={people}
  onValueChange={setPeople}
  options={team.map((m) => ({ value: m.id, label: m.name, description: m.role, leading: <Avatar uri={m.photo} size={28} /> }))}
/>

<Select label="Plan" options={plans} value={plan} onValueChange={setPlan} error={plan.length ? undefined : "Choose a plan to continue"} />

API reference

Motion and haptics

• •The chevron turns 180° on the snappy spring as the sheet opens and back as it closes.
• •A picked row's check draws itself in; in single mode the sheet waits 220 ms so the check finishes before it leaves.
• •Multiple mode: chips added after the field first rendered grow in from 60 % on the morph spring; removed chips shrink away (chip's own removal).
• •The sheet slides with bottom-sheet's springs.
• •Reduced motion: the chevron turns with a short timing, checks appear without drawing, chips appear without growing, and single mode closes after 60 ms.

• •Haptic: select when a value is picked or toggled
• •Haptic: warning when max is reached
• •Haptic: chip removal plays the chip's tap
• •Haptic: haptic={false} silences the select and warning

• •Filtering runs on each keystroke over labels, descriptions and keywords, accent and case insensitive. Rows are plain views in the sheet's scroll view, so keep lists to a few hundred options.

Accessibility

• •The field is a button whose label starts with the visible label, then the value ("Country, Germany"), with expanded and disabled in accessibilityState and aria-expanded and aria-haspopup on the web.
• •Rows are radios in a radiogroup (single) or checkboxes (multiple), with checked and disabled states; a description is read after the label.
• •Chips in the field have their own "Remove <label>" buttons, so values can be removed without opening the sheet; removal is announced by the chip.
• •Hitting max is refused with a warning haptic and announced ("Choose up to 3").
• •The sheet is the kit's bottom-sheet: modal, closable with back, the backdrop or a drag, and its grabber is adjustable.
• •Rows are at least 52 pt tall; the field at least 48 pt.

Notes for AI

Related