A searchable choice from a local list

// apps/docs/examples/ui/search-combobox.tsx'use client';
import {useState} from 'react';
import {SearchCombobox} from '@workspace/active-ui/components/composed/search-combobox';import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';
// A local list: the component filters it. `keywords` is searched, not shown.const SCHEMES = [  {value: 'dc-2024', label: 'Defined contribution 2024', keywords: 'DC'},  {value: 'db-final', label: 'Final salary', keywords: 'DB'},  {value: 'db-average', label: 'Career average', keywords: 'DB CA'},  {value: 'dc-2019', label: 'Defined contribution 2019', keywords: 'DC'},  {value: 'anw', label: 'Surviving dependants', keywords: 'ANW gap'},  {value: 'closed', label: 'Early retirement (closed)', disabled: true},];
/** * A searchable choice from a local list. Type on the focused button to * start searching; the search ignores case and accents and also matches the * hidden codes (try "DB"). The value is the option's `value`, never its label. */export default function SearchComboboxExample() {  const [scheme, setScheme] = useState<string | null>('db-average');  return (    <Field className="w-full max-w-xs">      <FieldLabel htmlFor="scheme">Pension scheme</FieldLabel>      <SearchCombobox        id="scheme"        options={SCHEMES}        value={scheme}        onValueChange={setScheme}        placeholder="Choose a scheme"        searchLabel="Search schemes"        searchPlaceholder="Search…"        emptyText="No scheme found."        locale="en"        aria-describedby="scheme-value"      />      <FieldDescription id="scheme-value">        Value: <code>{scheme ?? 'null'}</code>      </FieldDescription>    </Field>  );}