A custom styled dropdown select with keyboard navigation, typeahead, checkmark indicators, and form integration.

Basic

A simple select with a default value. Click or press Enter/ArrowDown to open. Arrow keys navigate, Enter/Space select, Escape closes.

With Groups

Grouped options with labels and separators.

Scrollable

A long list of grouped timezones showing overflow scrolling.

Disabled Items

Mix of enabled and disabled options. Disabled items are dimmed and skipped by keyboard.

Sizes

Default and small trigger sizes.

Placement

Different side positions. The popup flips if there isn't enough space.

Form Integration

Inside a <.form> with field, showing phx-change round-trip via form_field.

Your preferred web framework.

Server-controlled

Server owns the value via the value assign. Buttons below set the value from the server.

Server state: value=banana

Hybrid

Client instant selection + server notification via on_value_change.

Last server notification: (none)