Autocomplete

Display suggestions as users type.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.


Auto Highlight

Highlights the first option matching the input value.


Empty State

Displays content when the list or section has no items.


Grouped

Organizes related options under a shared heading.


Limit

Restricts the number of selectable items using the limit prop.


Loading

Shows a Skeleton while content processes.


Icon Examples

Icon-only buttons and decorative configurations.

Leading

Positions the Icon at the start of the content.


Trailing

Positions the Icon at the end of the content.


Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no border-radius.


Squircle

Applies a smooth continuous curve between adjacent corners.


More Examples

Additional variants and interactive states.

Static

Renders without motion wrappers or interactive animations.