Skip to content

Foundations

Select Field

Select and searchable combobox — options with icons and hints, groups, keyboard typeahead.

2 variantsMIT

Preview

Pick a language before sending.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/select-field.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { Select, Combobox } from "@/components/ui/select-field";

<Select
  label="Model"
  value={model}
  onValueChange={setModel}
  options={[
    { label: "Anthropic", options: [
      { value: "opus", label: "opus-5.5", icon: Brain, description: "Deep reasoning" },
      { value: "sonnet", label: "sonnet-5.5", icon: Cpu },
    ] },
  ]}
/>

<Combobox
  label="Tool"
  options={results}
  loading={searching}
  onQueryChange={search}   // filter on the server; omit to filter by label
  onValueChange={setTool}
/>

Props

PropTypeDefaultDescription
options*SelectOption[] | SelectGroup[]—Flat options or labelled groups (Combobox takes a flat list).
value / defaultValue / onValueChangestring—Selected value. Combobox passes null when cleared.
label / description / errorReactNode—Field label, help text and error, wired like TextField.
placeholderstring—Shown with no value.
onQueryChange(query: string) => void—Combobox. Called as the user types; when set, options are shown as given.
loading / emptyTextboolean / string—Combobox. Spinner while searching and the no-results line.
name / required / disabledstring / boolean / boolean—Select. Form integration.
type SelectOption = { value: string; label: string; icon?: Icon; description?: string; disabled?: boolean };
type SelectGroup = { label?: string; options: SelectOption[] };