Home
Docs
Themes
InfinityFX
©Copyright2016-2026 InfinityFX. All rights reserved.
InfinityFX®
Fluid UI
v2.0.0
Getting started
Installation
Configuration
Theming
Components
Display
ActionMenu
Combobox
Annotation
Badge
Code
Empty
Gradient
Key
Swatch
Table
Ticker
Timeline
Toast
Tooltip
Feedback
CircularProgress
Indicator
Interactable
ProgressBar
Skeleton
Spinner
Input
Autocomplete
Button
Calendar
Checkbox
Chip
ColorField
ColorPicker
DateField
Dial
DropZone
Field
FileField
Hamburger
NumberField
PasswordField
Pincode
Radio
Segmented
Select
Slider
Switch
Textarea
ThemeToggle
TimeField
Toggle
Layout
Accordion
Card
Popover
Sidebar
Collapsible
Cull
Divider
Drawer
Group
Modal
Overlay
Panel
Scrollarea
Navigation
NavigationMenu
Pagination
Stepper
Tabs
Hooks
useFluid
Links
Changelog
Create Fluid App
Skills
llms.txt

Select

Displays a list of selectable options.

Importing

1
import { Select } from '@infinityfx/fluid';

Usage

With annotation

Virtualization

API reference

Select Props

options
{ label: React.ReactNode; value: T extends string | number | string[]; key?: string; disabled?: boolean; }[]
Required
The list of options to display.
variant?
'default' | 'inverted' | 'minimal'
'default'
searchable?
boolean
false
Enables a search field in the dropdown.
limit?
number
Maximum number of options that can be selected at a time when multiple is true.
emptyMessage?
string
"Nothing found"
Text shown when no options match the search.
contentSize?
'xsm' | 'sml' | 'med' | 'lrg'
'med'
Size of the dropdown content.
mobileContainer?
'popover' | 'modal'
'popover'
How to display the Select content on mobile devices.
virtualItemHeight?
number
When set to a number greater than 0, enables virtual scrolling for better performance with large option lists.
value?
T
Controlled selected value or array of values.
defaultValue?
T
Default selected value or array of values.
onChange?
(value: T) => void
Callback function triggered when selection changes.
disabled?
boolean
false
variant
size
emptyMessage
multiple
searchable
round
disabled
Theme *