> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmembrane.com/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 |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.