Combobox

The ComboBox component is used internally for the DataForm 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:

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}
    />
  )
}

Styling component parts

Styling is supported, see 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

Getting Started

Ways to Use Membrane

How Membrane Works

Managing Membrane

References

Styling component parts

​Styling component parts

Styling component parts