Combobox

Search and select a value, with optional grouping and creation.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { useState } from 'react';
import { Combobox } from '@vrum/ui';

export default function Demo() {
  const [value, setValue] = useState("design");

  return (
    <Combobox
      options={[{"value":"design","label":"Design","group":"Teams"},{"value":"engineering","label":"Engineering","group":"Teams"},{"value":"operations","label":"Operations","group":"Teams"}]}
      value={value}
      placeholder={"Select a team"}
      allowClear={true}
      disabled={false}
      loading={false}
      onValueChange={setValue}
    />
  );
}

Combobox props

Prop	Type	Default	Description
`options*`	`ComboboxOption[]`	none	options configuration.
`value`	`string`	none	Controlled value; connect the callback to application state.
`defaultValue`	`string`	`""`	Initial value for an uncontrolled component.
`onValueChange`	`((value: string) => void)`	none	Called when the selected value changes.
`placeholder`	`string`	`"Select an option…"`	Hint shown when no value is entered.
`popoverWidth`	`string \| number`	none	popover width configuration.
`defaultExpanded`	`boolean`	`false`	default expanded configuration.
`onSearch`	`((query: string) => void)`	none	on search configuration.
`loading`	`boolean`	`false`	loading configuration.
`renderOption`	`((option: ComboboxOption) => React.ReactNode)`	none	render option configuration.
`onCreate`	`((value: string) => void)`	none	on create configuration.
`createLabel`	`string`	`"Create"`	create label configuration.
`allowClear`	`boolean`	`false`	allow clear configuration.
`iconLeft`	`React.ReactNode`	none	icon left configuration.
`isOptionDisabled`	`((option: ComboboxOption) => boolean)`	none	is option disabled configuration.
`disabled`	`boolean`	none	Disable user interaction.
`defaultChecked`	`boolean`	none	default checked configuration.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

Combobox

Search and select a value, with optional grouping and creation.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { useState } from 'react';
import { Combobox } from '@vrum/ui';

export default function Demo() {
  const [value, setValue] = useState("design");

  return (
    <Combobox
      options={[{"value":"design","label":"Design","group":"Teams"},{"value":"engineering","label":"Engineering","group":"Teams"},{"value":"operations","label":"Operations","group":"Teams"}]}
      value={value}
      placeholder={"Select a team"}
      allowClear={true}
      disabled={false}
      loading={false}
      onValueChange={setValue}
    />
  );
}

Combobox props

Prop	Type	Default	Description
`options*`	`ComboboxOption[]`	none	options configuration.
`value`	`string`	none	Controlled value; connect the callback to application state.
`defaultValue`	`string`	`""`	Initial value for an uncontrolled component.
`onValueChange`	`((value: string) => void)`	none	Called when the selected value changes.
`placeholder`	`string`	`"Select an option…"`	Hint shown when no value is entered.
`popoverWidth`	`string \| number`	none	popover width configuration.
`defaultExpanded`	`boolean`	`false`	default expanded configuration.
`onSearch`	`((query: string) => void)`	none	on search configuration.
`loading`	`boolean`	`false`	loading configuration.
`renderOption`	`((option: ComboboxOption) => React.ReactNode)`	none	render option configuration.
`onCreate`	`((value: string) => void)`	none	on create configuration.
`createLabel`	`string`	`"Create"`	create label configuration.
`allowClear`	`boolean`	`false`	allow clear configuration.
`iconLeft`	`React.ReactNode`	none	icon left configuration.
`isOptionDisabled`	`((option: ComboboxOption) => boolean)`	none	is option disabled configuration.
`disabled`	`boolean`	none	Disable user interaction.
`defaultChecked`	`boolean`	none	default checked configuration.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

Combobox

Interactive playground

Props

Combobox props

Combobox

Interactive playground

Props

Combobox props