Skip to content

SelectField

FLEX
Included

Rich selection with search, grouped options, virtual lists and remote pagination.

SelectField

Core SelectField demos: search, multi-select, rich options, grid layout, dynamic loading, and Filament parity.

Closed trigger truncates to one line; dropdown can grow wider for long option labels.
Chip/tag mode: selected options leave the dropdown list. Use checklist mode below to keep them visible.
Classic multi-select: options stay in the list with checkmarks; the dropdown stays open while you toggle.
Two-line options (name + email) with chipLabel — chips show email only while the dropdown keeps the full row.
optionView() — custom Blade per option: avatar + name in trigger, avatar + name + email in list (like render props).
Grouped continents with optionGroupSeparators() — matches Autocomplete With Sections.
disabledOptions(['cat', 'kangaroo']) — visible but not selectable, like Autocomplete disabled keys.
paginatedSearchResults() + getSearchResultsPageUsing() — scroll the list to load more rows.
Published is disabled via disableOptionWhen() — visible but not selectable.
options(fn…) — options load when the dropdown opens; centered spinner + translated loading label.
wrapOptionLabels(false) truncates long labels in the trigger and dropdown.
Multi-select only: drag chips in the closed trigger (cursor: move) to change value order — not dropdown options.
Filament boolean() helper — yes/no placeholder options.
Closed trigger stays medium height (icon + title). Description and badges show in the dropdown.

SelectField — Sizes & surfaces

Track sizes, multi-select chip sizes, rich option density, surface variants, and the item-card trigger.

variant('item-card') — compact card-style trigger for item-card groups and SaaS settings rows.

SelectField — Configuration API

Every SelectField setup method from the docs: search UX, clear/placeholder, affixes, colors, rounding, focus outline, dropdown alignment, and custom icons.

inlineSearch() — search input lives inside the trigger instead of the dropdown header.
entityMentions() — type @ in the closed trigger or search box to pick people asynchronously.
inlineFieldLabel() — field label renders inside the trigger track.
clearable() — × button when a value is selected (default for bordered variant).
clearable(false) — hides the clear button.
selectablePlaceholder(false) — after choosing a value you cannot pick the empty placeholder again.
https://
.com
prefix()/suffix() with isInline: true — visual only; stored state is the option key.
prefixIcon(..., isInline: true) — leading icon inside the trigger shell.
dropdownAlign('start') — panel anchors to the leading edge of the trigger.
dropdownAlign('end') — panel anchors to the trailing edge of the trigger.
color('primary') — fi-color-* wrapper class.
rounding('full') — pill-shaped trigger.
focusOutline() — visible focus ring on keyboard focus.
chipColor('primary')
chipColor('success')
chipColor('danger')
chevronIcon() + clearIcon() — override default Hugeicons trigger icons.
selectedOptionCheckIcon() — used in keepSelectedOptionsInDropdown() rows.

Smart suggest · create option

Headless combobox allowCreateOption() — type a label that is not in the list, then pick the create row to commit it as the value (inline, no modal).

Search for a framework that is not listed (e.g. "Svelte") — a Create row appears at the top of the dropdown.
Same create row in multi-select — each created value becomes a chip. minItems(1) validates on submit; maxItems(3) blocks extra picks with an in-menu message.
createOptionForm() + createOptionUsing() — multi-field modal (not the inline Create row). After save, the new value is selected and the label refreshes.
recentOptions() and suggestedOptions() sections appear when the query is empty; create row appears once you type a new label.

Scale · cascading · RTL

Virtualized 10k options, dependsOn() cascading selects, and dir=rtl previews (dropdown search vs inlineSearch).

Headless combobox keeps a ~50-row DOM window once options ≥ 100 — scroll or arrow through all 10 000 rows without mounting the full list.
Rich grid uses the same full option collection; only visible grid rows are mounted. Keyboard navigation resolves row offsets after measuring cells.
->live() + skipRenderAfterStateUpdated() so Region stays clickable (no full-page morph). Options still re-resolve via getOptionsForJs when Region opens.
Changing country immediately clears the region. Options load on open; the server validates the selected region against the current country.
dir=rtl + searchable() — search field in the dropdown header (filled × clears query).
dir=rtl + inlineSearch() + clearable() — trigger input + default clear (×) + chevron; no dropdown search ×.
inlineFieldLabel() inside RTL trigger — affix order with Arabic labels.
dir=rtl on he-IL labels — second RTL locale smoke test.
Dropdown search with prefixIcon + dropdownAlign('end') in RTL.

SelectField — Native API compatibility

Native HTML for a plain single select; search, multiple and HTML automatically use the Flex Fields renderer, independent of fluent call order.

Loading code examples…

Information

Developer
FLEX
Category
Pickers
Website