Active Foundation · Example
Objects, typed: items, value and callback share one type
Objects, typed: items, value and callback share one typeClient
Nothing chosen.
Full source examples/ui/combobox-objects.tsx
// apps/docs/examples/ui/combobox-objects.tsx'use client';
import {useState} from 'react';
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList,} from '@workspace/active-ui/components/primitives/combobox';import { Field, FieldDescription, FieldLabel,} from '@workspace/active-ui/components/primitives/field';
interface Airport { code: string; label: string;}
const AIRPORTS: readonly Airport[] = [ {code: 'AMS', label: 'Amsterdam Schiphol'}, {code: 'BRU', label: 'Brussels'}, {code: 'CDG', label: 'Paris Charles de Gaulle'}, {code: 'FRA', label: 'Frankfurt'}, {code: 'LIS', label: 'Lisbon'},];
/** * The generic contract with objects: `Combobox<Airport>` ties `items`, the * `value`, the argument of `onValueChange` and the function child of * `ComboboxList` to one type. The text shown and filtered is the `label`; * `isItemEqualToValue` compares by code, so a value from elsewhere (a form, * the server) matches its item. */export default function ComboboxObjectsExample() { const [airport, setAirport] = useState<Airport | null>(null); return ( <Field className="w-full max-w-sm"> <FieldLabel htmlFor="combobox-airport">Departure</FieldLabel> <Combobox<Airport> items={AIRPORTS} value={airport} onValueChange={(next) => setAirport(next)} isItemEqualToValue={(item, value) => item.code === value.code} > <ComboboxInput id="combobox-airport" placeholder="Search an airport" triggerLabel="Show airports" /> <ComboboxContent> <ComboboxEmpty>No airport matches.</ComboboxEmpty> <ComboboxList> {(item: Airport) => ( <ComboboxItem key={item.code} value={item}> {item.label} ({item.code}) </ComboboxItem> )} </ComboboxList> </ComboboxContent> </Combobox> <FieldDescription> {airport ? `Chosen: ${airport.code}` : 'Nothing chosen.'} </FieldDescription> </Field> );}