Combobox and MultiSelect component

When to use

Picking a user, a record, a country: more choices than a Select shows well.

When not to

A handful of fixed choices: use Select.

Examples

Search and pick

combobox.tsx

import { useState } from 'react'
import { Combobox } from '@kition/tessera-ui'

const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Katherine Johnson', 'Margaret Hamilton', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth']

export default function Demo() {
  const [person, setPerson] = useState<number | undefined>(2)
  return (
    <div style={{ maxWidth: 320 }}>
      <Combobox
        label="Person"
        size="md"
        placeholder="Search people"
        value={person}
        onChange={setPerson}
        options={PEOPLE.map((name, index) => ({ value: index + 1, label: index === 5 ? `${name} (no GitHub)` : name, disabled: index === 5 }))}
      />
    </div>
  )
}

Several choices

multi-select.tsx

import { useState } from 'react'
import { MultiSelect } from '@kition/tessera-ui'

const MODES = ['free', 'reward', 'paid', 'hosted'].map((value) => ({ value, label: value }))

export default function Demo() {
  const [modes, setModes] = useState(['paid', 'hosted'])
  return (
    <div style={{ maxWidth: 280 }}>
      <MultiSelect label="Mode" placeholder="Any mode" size="md" values={modes} onChange={setModes} options={MODES} />
    </div>
  )
}

Props

Combobox

One choice from a long list, searched as the person types; the choice can be cleared.

Prop	Type	Default	Description
`value`required	`V \| undefined`	—
`onChange`required	`(value: V \| undefined) => void`	—
`options`required	`readonly ComboboxOption<V>[]`	—
`onSearch`	`(query: string) => void`	—	Search on the server: called with each query, and the options shown are the caller's. Without it, the options are filtered here.
`loading`	`boolean`	—
`placeholder`	`string`	—
`emptyText`	`ReactNode`	—	Shown when nothing matches.
`label`required	`string`	—	The control's accessible name.
`size`	`ControlSize`	`'sm'`
`disabled`	`boolean`	—
`className`	`string`	—
`testId`	`string`	—

MultiSelect

Several choices from a list: the chosen ones in the field, toggled in a list (searchable once it is long).

Prop	Type	Default	Description
`values`required	`readonly V[]`	—
`onChange`required	`(values: V[]) => void`	—
`options`required	`readonly ComboboxOption<V>[]`	—
`placeholder`	`string`	—	Shown when nothing is chosen.
`label`required	`string`	—	The control's accessible name.
`size`	`ControlSize`	`'sm'`
`disabled`	`boolean`	—
`className`	`string`	—
`testId`	`string`	—