Homecomponentsinput
NativeSelect
An expanding list of choices to select from.
The NativeSelect input is similar to Select in that is a component that allows users to pick a value from a set of predefined options. However, if differs in that it shows the native Operating System UI to pick the options.
Often, this is useful on touch devices with smaller screens where the experience provided by the OS is better than the one provided by emulated drop-down.
Size
Use size property to set the size of select input.
Label
Use label property to set the label.
Select a state
Label tip
Use tip property to add a tooltip next to label.
Select the biggest state
Secondary label for input
Use secondaryLabel property to set the alternative label.
Select a state
Start icon of input and start icon of option
Use startIcon property to add an icon before the input label.
Use SelectOption.startIcon property to add an icon before the option label.
When an option with start icon is selected, this icon is displayed in place of
input's start icon.
The "startIcon" is set only for input.
Select the biggest state
The "startIcon" is set only for options.
Select the biggest state
The "startIcon" is set both for input and options.
Select the biggest state
Disabled
Use disabled to disable the select input.
Select a state
Error Message
Use errorMessage property to add an error message below the select input.
Select the biggest state
API
options
Required
NativeSelectOption[]
onChange
Required
(selected: string) => void
name
Required
string
value
string
size
small
regular
startIcon
IconComponent
id
string
label
string
tip
string
secondaryLabel
ReactNode
description
string
errorMessage
string
disabled
true
false
data
DataAttributeMap
ref
Ref<HTMLSelectElement>
key
Key | null