Select

The kalo generic select component

Props

NameTypeDescription
children
node
selection
any
onSelect
func
placeholder
nodePlaceholder copy to show before a selection has been made
nullable
bool
formatSelection
func
onBlur
func
readonly
boolDisables user interaction, but can still display a value
disabled
boolVisually disables user interaction
empty
string
center
no type

Select

A standard Select
<SelectDemo />

Disabled select

Select inputs can also be disabled
<Select disabled={true} onSelect={function noRefCheck() {}} placeholder="Select your country" > <Option> Afghanistan </Option> <Option> Åland Islands </Option> <Option> Albania </Option> <Option> Algeria </Option> <Option> American Samoa </Option> <Option> AndorrA </Option> <Option> Angola </Option> <Option> Anguilla </Option> <Option> Antarctica </Option> <Option> Antigua and Barbuda </Option> <Option> Argentina </Option> </Select>

Readonly select

Readonly selects are useful for displaying a value, but disabling user interaction
<Select onSelect={function noRefCheck() {}} placeholder="Select your country" readonly={true} selection="Zambia" > <Option> Afghanistan </Option> <Option> Åland Islands </Option> <Option> Albania </Option> <Option> Algeria </Option> <Option> American Samoa </Option> <Option> AndorrA </Option> <Option> Angola </Option> <Option> Anguilla </Option> <Option> Antarctica </Option> <Option> Antigua and Barbuda </Option> <Option> Argentina </Option> </Select>