Combobox

Filters large lists to selectable options based on the matching query. People can enter a custom value into the field or click the button to choose from a list of predefined values. When people enter a custom value, it’s not added to the list of choices.

Figma

Thành phố

Usage

import { 
  ComboboxTrigger,
  ComboboxContent,
  Combobox,
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@momo-webplatform/mobase";

Combobox component extends Combobox (opens in a new tab) component and supports all of its props.

The Combobox is built using a composition of the <Popover /> (opens in a new tab) and the <Command /> (opens in a new tab) components.
Provide relevant choices.
People appreciate the ability to enter a custom value, as well as the convenience of choosing from a list of the most likely choices.

API Reference

ComboboxTrigger

Prop	Type	Default	Required
`className`	string	--	false
`value`	string	--	false
`label`	string	--	false
`placeholder`	string	--	false
`asChild`	enumboolean	--	false
`side`	enumtop \| right \| bottom \| left	--	false
`sideOffset`	number	--	false
`align`	enumcenter \| start \| end	--	false
`alignOffset`	number	--	false
`arrowPadding`	number	--	false
`avoidCollisions`	enumboolean	--	false
`collisionBoundary`	enumElement \| Element[]	--	false
`collisionPadding`	enumnumber \| Partial<Record<top \| right \| bottom \| left, number>>	--	false
`sticky`	enumpartial \| always	--	false
`hideWhenDetached`	enumboolean	--	false
`updatePositionStrategy`	enumalways \| optimized	--	false
`onEscapeKeyDown`	(event: KeyboardEvent) => void	--	false
`onPointerDownOutside`	(event: PointerDownOutsideEvent) => void	--	false
`onFocusOutside`	(event: FocusOutsideEvent) => void	--	false
`onInteractOutside`	(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void	--	false
`onOpenAutoFocus`	(event: Event) => void	--	false
`onCloseAutoFocus`	(event: Event) => void	--	false
`forceMount`	true	--	false

ComboboxContent

Prop	Type	Default	Required
`className`	string	--	false
`asChild`	enumboolean	--	false
`side`	enumtop \| right \| bottom \| left	--	false
`sideOffset`	number	--	false
`align`	enumcenter \| start \| end	--	false
`alignOffset`	number	--	false
`arrowPadding`	number	--	false
`avoidCollisions`	enumboolean	--	false
`collisionBoundary`	enumElement \| Element[]	--	false
`collisionPadding`	enumnumber \| Partial<Record<top \| right \| bottom \| left, number>>	--	false
`sticky`	enumpartial \| always	--	false
`hideWhenDetached`	enumboolean	--	false
`updatePositionStrategy`	enumalways \| optimized	--	false
`onEscapeKeyDown`	(event: KeyboardEvent) => void	--	false
`onPointerDownOutside`	(event: PointerDownOutsideEvent) => void	--	false
`onFocusOutside`	(event: FocusOutsideEvent) => void	--	false
`onInteractOutside`	(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void	--	false
`onOpenAutoFocus`	(event: Event) => void	--	false
`onCloseAutoFocus`	(event: Event) => void	--	false
`forceMount`	true	--	false

Combobox

Prop	Type	Default	Required
`open`	enumboolean	--	false
`defaultOpen`	enumboolean	--	false
`onOpenChange`	(open: boolean) => void	--	false
`modal`	enumboolean	--	false

Best practices

Make sure list items aren’t wider than the text field.
If an item is too wide, the text field might truncate it, which is hard for people to read.

Choicebox Command