React Native Mantine › Inputs

Combobox

Building blocks for custom select components

Import: import { Combobox } from 'react-native-mantine';

Usage

import { Combobox, useCombobox } from 'react-native-mantine';

const store = useCombobox();
const [value, setValue] = useState<string | null>(null);

<Combobox store={store} onOptionSubmit={setValue}>
  <Combobox.Target>
    <Button>{value ?? 'Pick a value'}</Button>
  </Combobox.Target>
  <Combobox.Dropdown>
    <Combobox.Search
      placeholder="Search"
      value={search}
      onChangeText={setSearch}
    />
    <Combobox.Options>
      {filtered.map((item) => (
        <Combobox.Option key={item} value={item}>
          {item}
        </Combobox.Option>
      ))}
      {filtered.length === 0 && (
        <Combobox.Empty>Nothing found</Combobox.Empty>
      )}
    </Combobox.Options>
  </Combobox.Dropdown>
</Combobox>

Props

Source on GitHub · npm