Combobox

Combobox is a component that allows for interactive and flexible ways to capture user input.

Import

import { Combobox } from '@sajari-ui/core';

import { Combobox } from '@sajari-ui/core';

Usage

Here's a basic usage of the Combobox.

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);

  return <Combobox selectedItems={selectedItems} onChange={setSelectedItems} items={items} />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);
  return <Combobox selectedItems={selectedItems} onChange={setSelectedItems} items={items} />;
}

Placeholder

You can pass in a fixed string or a function that receives the selected items and return a string, if no placeholder prop is passed, it will default to "Select..." when there are no values and show the name of the value if it's in single mode or "{num} items selected" if in multiple mode.

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} mode="multiple" placeholder="Select something" />
      <Combobox items={items} mode="multiple" placeholder={(items) => `${items.length} fruits already chosen`} />
    </Flex>
  );
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} mode="multiple" placeholder="Select something" />
      <Combobox items={items} mode="multiple" placeholder={(items) => `${items.length} fruits already chosen`} />
    </Flex>
  );
}

Clear value

By default, the combobox will clear the search value once it no longer receives any focus, to disable this, simple pass clearValueOnBlur={false} prop.

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} />
      <Combobox items={items} clearValueOnBlur={false} />
    </Flex>
  );
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} />
      <Combobox items={items} clearValueOnBlur={false} />
    </Flex>
  );
}

Sizes

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} size="sm" />
      <Combobox items={items} />
    </Flex>
  );
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} size="sm" />
      <Combobox items={items} />
    </Flex>
  );
}

Single mode

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return <Combobox items={items} mode="single" />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return <Combobox items={items} mode="single" />;
}

Tag mode

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return <Combobox items={items} mode="tag" />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return <Combobox items={items} mode="tag" />;
}

Grouping options

Editable Example

function Example() {
  const items = [
    { value: 'Shirts', group: 'Cloth' },
    { value: 'Shoes', group: 'Cloth' },
    { value: 'Hats', group: 'Accessory' },
  ];

  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} />
      <Combobox items={items} mode="tag" />
      <Combobox items={items} mode="single" />
    </Flex>
  );
}

function Example() {
  const items = [
    { value: 'Shirts', group: 'Cloth' },
    { value: 'Shoes', group: 'Cloth' },
    { value: 'Hats', group: 'Accessory' },
  ];
  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox items={items} />
      <Combobox items={items} mode="tag" />
      <Combobox items={items} mode="single" />
    </Flex>
  );
}

Loading state

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return <Combobox items={items} loading />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return <Combobox items={items} loading />;
}

Disable clear

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return <Combobox items={items} allowClear={false} />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return <Combobox items={items} allowClear={false} />;
}

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];

  return <Combobox items={items} mode="single" closeOnSelect={false} />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  return <Combobox items={items} mode="single" closeOnSelect={false} />;
}

Disabled

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);

  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox placeholder="Disabled example" disabled mode="single" onChange={setSelectedItems} items={items} />
      <Combobox
        placeholder="Disabled example"
        disabled
        mode="single"
        selectedItems={selectedItems}
        onChange={setSelectedItems}
        items={items}
      />
    </Flex>
  );
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);
  return (
    <Flex flexDirection="flex-col" space="space-y-2">
      <Combobox placeholder="Disabled example" disabled mode="single" onChange={setSelectedItems} items={items} />
      <Combobox
        placeholder="Disabled example"
        disabled
        mode="single"
        selectedItems={selectedItems}
        onChange={setSelectedItems}
        items={items}
      />
    </Flex>
  );
}

Readonly

Editable Example

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);

  return <Combobox selectedItems={selectedItems} readOnly onChange={setSelectedItems} items={items} />;
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);
  return <Combobox selectedItems={selectedItems} readOnly onChange={setSelectedItems} items={items} />;
}

With an associated label

Editable Example

Item

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);

  return (
    <>
      <Label htmlFor="item" margin="mb-2" id="item-label">
        Item
      </Label>
      <Combobox
        id="item"
        labelId="item-label"
        selectedItems={selectedItems}
        onChange={setSelectedItems}
        items={items}
      />
    </>
  );
}

function Example() {
  const items = ['Shirts', 'Shoes', 'Hats'];
  const [selectedItems, setSelectedItems] = React.useState(['Shoes']);
  return (
    <>
      <Label htmlFor="item" margin="mb-2" id="item-label">
        Item
      </Label>
      <Combobox
        id="item"
        labelId="item-label"
        selectedItems={selectedItems}
        onChange={setSelectedItems}
        items={items}
      />
    </>
  );
}

Props

The Combobox component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.

Name	Type	Default	Description
`aria-label`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`aria-describedby`	`string`		Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.
`labelId`	`string`		`id` of the `label` element labelling this input, in scenarios where the input has a visible label. A11y: It's usefult for screen readers.
`disabled`	`boolean`	`false`	If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`invalid`	`boolean`	`false`	If `true`, the `input` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`required`	`boolean`	`false`	If `true`, the input element will be required.
`readOnly`	`boolean`	`false`	If `true`, prevents the value of the input from being edited.
`size`	`"sm"` \| `"md"`	`"md"`
`mode`	`"single"` \| `"multiple"` \| `"tag"`	`"multiple"`	To switch between single or multiple selected items.
`items`	`Item[]` \| `string[]`		List of option items.
`selectedItems`	`Item[]` \| `string[]`	`[]`	List of selected option items.
`onChange`	`(selectedItems: Item[]` \| `string[]) => void`
`placement`	`PopperJS.Placement`	`"bottom"`	The placement of the suggestion dropdown.
`placeholder`	`string` \| `(selectedItems: Item[]` \| `string[]) => string`		To set the placeholder or displayed value in multiple mode.
`loading`	`boolean`	`false`	If `true`, a spinner icon will show to display a loading state.
`allowClear`	`boolean`	`true`	If `true`, a close icon will show to clear all the selected items.
`closeOnSelect`	`boolean`		By default, the dropdown will be closed after selecting in single mode and vice versa in other modes.
`validateSelectedItems`	`boolean`	`true`	If `true`, selected items will be filtered to match the items prop.

Combobox

Import

Usage

Editable Example

Placeholder

Editable Example

Clear value

Editable Example

Sizes

Editable Example

Single mode

Editable Example

Tag mode

Editable Example

Grouping options

Editable Example

Loading state

Editable Example

Disable clear

Editable Example

Keep the dropdown after selecting

Editable Example

Disabled

Editable Example

Readonly

Editable Example

With an associated label

Editable Example

Props