import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import {
ComponentStatus,
COMPONENT_STATUS,
} from "../../storybook-components/ComponentStatus";
import { Combobox } from "./Combobox";
import { ComboboxMulti } from "./ComboboxMulti";
export const options = [
{ value: "red", label: "Red" },
{ value: "blue", label: "Blue" },
{ value: "yellow", label: "Yellow" },
{ value: "orange", label: "Orange" },
{ value: "green", label: "Green" },
{ value: "purple", label: "Purple" },
{ value: "pink", label: "Pink" },
{ value: "teal", label: "Teal" },
{ value: "tan", label: "Tan" },
{ value: "brown", label: "Brown" },
{ value: "white", label: "White" },
{ value: "black", label: "Black" },
{ value: "gray", label: "Gray" },
];
# Combobox
A combobox is the combination of a text input and a list of options. The list is
used to help the user select a value, but the value does not necessarily have to
come from that list.
This component is also sometimes referred to as an autocomplete or autosuggest.
## Props
## Demos
### Single option
Use the single option combobox when you want users to be able to select only one
value.
#### Clearable
The selected value can be cleared by using the `isClearable` prop.
#### Not searchable
The combobox is searchable by default. This can be disabled by setting
`isSearchable` to false.
A non-searchable combobox behaves like a typical HTML select element.
#### Creatable
Options can be created by setting `isCreatable` to true and passing a function
to `onCreate`.
{() => {
const [creatableOptions, setState] = React.useState(options);
const onCreate = (value) => {
setState([...creatableOptions, value]);
};
return (
);
}}
#### Setting a default value
A default value can be passed in.
#### Using value transformation
You can use the `getOptionLabel` and `getOptionValue` to set the value and label.
color.name}
getOptionValue={(color) => color.id}
/>
#### Changing placeholder text
The placeholder text can be customized to better describe the options.
#### Disabled
The combobox can be disabled.
### Multiple option
Use the multiple option combobox when you want users to be able to select more
than one value. There is no limit to how many options can be selected.
#### Clearable
Each option can be removed individually, but if the `isClearable` prop is set to
true, then all of the options will be removed at once.
#### Not searchable
The combobox is searchable by default. This can be disabled by setting
`isSearchable` to false.
#### Creatable
Options can be created by setting `isCreatable` to true and passing a function
to `onCreate`.
{() => {
const [creatableOptions, setState] = React.useState(options);
const onCreate = (value) => {
console.log(value);
setState([...creatableOptions, value]);
};
return (
);
}}
#### Disabled
The combobox can be disabled.