Select

Usage examples for Select, SearchSelect, and MultipleSearchSelect components.

Basic Select

Basic, no search.

Search Select

Type to filter options

Multiple Select

Multi-select with removable chips & search

Required & Error

This field is required.

Disabled & Helper

You cannot interact with this field

Try typing to filter

Custom Option Renderer

Custom icon + description per option

Dependent Selects (Country → City)

Parent select

Filtered by country

Multiple (Max Items Limit)

Limit enforced inside component

Positioning & UX Notes

All select popovers use smart placement and keyboard accessibility (Arrow keys, Enter, Escape). Search variants autofocus the search box on open, and the multiple variant shows removable chips with a clear-all control.

Default Behavior:

  • Opens below, flips above if needed
  • ArrowUp/Down to navigate, Enter to select
  • Search input traps typing in search variants

Best Practices:

  • Show helper text for constraints.
  • Use custom renderers for rich options.
  • Reset dependent selects when parents change