@spark-web/combobox

---
title: Combobox
storybookPath: forms-combobox--default
isExperimentalPackage: true
---

The Combobox allows the user to browse, search, and make a single selection
from a large list of values.

Usage

$3

``jsx live
const [value, setValue] = React.useState(null);

return (

placeholder="Select a character"
items={[
{ label: 'Jake', value: 'jake' },
{ label: 'Finn', value: 'finn' },
{ label: 'BMO', value: 'bmo' },
]}
onChange={value => setValue(value)}
value={value}
/>

);
`

$3

`jsx live

placeholder="Select a character"
items={[
{ label: 'Jake', value: 'jake' },
{ label: 'Finn', value: 'finn' },
{ label: 'BMO', value: 'bmo' },
]}
/>

`

$3

`jsx live
const [items, setItems] = React.useState([]);
const [value, setValue] = React.useState(null);

const fetchItems = async input => {
if (!input) return [];
await new Promise(resolve => setTimeout(resolve, 1000));
return [{ label: input, value: input }];
};

return (

placeholder="Start typing..."
items={items}
onChange={value => setValue(value)}
onInputChange={input => setItems(fetchItems(input))}
value={value}
/>

);
`

Custom label and value

`jsx live
const [value, setValue] = React.useState(null);

return (
label="What's your favourite movie?"
message={JSON.stringify(value ?? {})}
>
placeholder="Select a movie"
items={[
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
]}
onChange={value => setValue(value)}
value={value}
getOptionLabel={option => option.title}
getOptionValue={option => ${option.year}}
/>

);
`

Grouped

`jsx live

placeholder="Select a character"
items={[
{
label: 'Futurama',
options: [
{ label: 'Fry', value: 'fry' },
{ label: 'Leela', value: 'leela' },
{ label: 'Bender', value: 'bender' },
{ label: 'Zoidberg', value: 'zoidberg' },
],
},
{
label: 'South Park',
options: [
{ label: 'Stan', value: 'stan' },
{ label: 'Kyle', value: 'kyle' },
{ label: 'Cartman', value: 'cartman' },
{ label: 'Kenny', value: 'kenny' },
],
},
]}
/>

`

With Default Option

`jsx live

placeholder="Select a character"
items={[
{ label: 'Jake', value: 'jake' },
{ label: 'Finn', value: 'finn' },
{ label: 'BMO', value: 'bmo' },
]}
defaultOption={{
option: { label: 'The Ice King', value: 'ice king' },
position: 'start',
}}
/>

`

Appearance

$3

`jsx live

placeholder="Select a character"
items={[
{ label: 'Jake', value: 'jake' },
{ label: 'Finn', value: 'finn' },
{ label: 'BMO', value: 'bmo' },
]}
/>

`

$3

`jsx live
label="Who's your favourite Adventure Time character?"
tone="critical"
message="Required"
>
placeholder="Select a character"
items={[
{ label: 'Jake', value: 'jake' },
{ label: 'Finn', value: 'finn' },
{ label: 'BMO', value: 'bmo' },
]}
/>

``

Props

[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1