> ## Documentation Index
> Fetch the complete documentation index at: https://docs.membrane.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Combobox

The `ComboBox` component is used internally for the [`DataForm`](/docs/ways-to-use-membrane/sdk/react/data-input) UI.\
It handles each input with dropdown, tags, formula configuration, etc.
It is possible to use it without `DataForm` by passing `options` or `optionFactories`. Additionally, `variablesSchema` is supported.

Here is the example with static options and local state:

```javascript theme={null}
import { ComboBox, ComboBoxOption } from "@membranehq/react";

const staticOptions: ComboBoxOption[] = [
  {
    label: 'Option 1',
    value: 'option-1',
  },
  {
    label: 'Option 2',
    value: 'option-2',
  },
]

export function ComboboxExample() {
  const [value, setValue] = useState<unknown>(null)

  return (
    <ComboBox
      value={value}
      onChange={setValue}
      placeholder='Type here...'
      options={staticOptions}
    />
  )
}
```

<br />

## Styling component parts

Styling is supported, see [Components](/docs/ways-to-use-membrane/sdk/react/ui-components) page for more details.

The `ComboBox` component is made of multiple smaller components, here is a list of parts for each:

**Component:**\
dropdown

| Part className                     | Description                                                    |
| ---------------------------------- | -------------------------------------------------------------- |
| `dropdown__popover-container`      | Main container of a dropdown. Emits keyboard navigation events |
| `dropdown__content`                | Dropdown content container                                     |
| `dropdown__panel`                  | Section panel. Can be multiple. Can be nested                  |
| `dropdown__search-input`           | Search input element                                           |
| `dropdown__search-divider`         | Divider between search input and rest of elements              |
| `dropdown__list`                   | Items list container                                           |
| `dropdown__items-list-header`      | Items list header                                              |
| `dropdown__item`                   | Single list item container                                     |
| `dropdown__item-title`             | List item title                                                |
| `dropdown__no-options-heading`     | Heading title for empty search result                          |
| `dropdown__error-heading`          | Heading for error when options failed to load                  |
| `dropdown__error-heading-icon`     | Error heading icon                                             |
| `dropdown__info-heading`           | Heading for unsupported states within the dropdown             |
| `dropdown__info-heading-icon`      | Info heading icon                                              |
| `dropdown__loading-item-container` | List item skeleton container                                   |
| `dropdown__loading-item-icon`      | List item icon skeleton                                        |
| `dropdown__loading-item-title`     | Loading item title skeleton                                    |