Single select

One-of-many dropdown for forms, with optional search and a pluggable match.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { SingleSelect } from "@payglocal_ui/flux-ui";

Example

const [currency, setCurrency] = useState("");

<SingleSelect
  options={[
    { label: "₹ - Indian Rupee (INR)", value: "INR" },
    { label: "$ - US Dollar (USD)", value: "USD" },
  ]}
  value={currency}
  onChange={setCurrency}
  placeholder="Select ISO3 currency code"
  showSearch
  searchPlaceholder="Search currency"
/>