Skip to content

Select

Select element input
import {
DuplicateSVG,
EthSVG,
FlagSVG,
MoonSVG,
Select,
} from '@ensdomains/thorin'
<Card>
<Select
autocomplete
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{
value: '4',
label: 'Four',
prefix: <DuplicateSVG />,
disabled: true,
},
{ value: '5', label: 'Four', prefix: <DuplicateSVG /> },
]}
tabIndex="2"
/>
</Card>

Props
#

name
type
default
description
autocomplete
boolean
false
If the options list will filter options based on text input.
createable
boolean
false
If it is possible to create an option if it does not exist in the options list.
createablePrefix
string
Add
The string or component to prefix the value in the create value option.
description
ReactNode
-
Description text or react component.
direction
"up" | "down"
down
If the menu opens up top or bottom.
disabled
boolean
-
If true, prevents user interaction with component.
emptyListMessage
string
No results
Message displayed if there is no available options.
hideLabel
boolean
-
If true, hides the label and secondary label.
id
string
-
The id attribute of div element.
inline
boolean
-
If true, moves the label and status messages to the right of the content.
labelRight
boolean
-
Have lavel appear on the right of the form element.
labelSecondary
ReactNode
-
Secondary text or react component
name
string
-
The name property of an input element.
noSelectionMessage
string
-
The message for when there is no option selected
onChange
ChangeEventHandler<HTMLInputElement>
-
The handler for change events.
ref
Ref<HTMLInputElement>
-
-
tabIndex
number
-1
The tabindex attribute for
onFocus
FocusEventHandler<HTMLInputElement>
-
The handler for focus events.
onBlur
FocusEventHandler<HTMLInputElement>
-
The handler for blur events.
onCreate
(value: string) => void
-
A handler for when new values are created
error
ReactNode
-
Error text or a react component.
inputSize
number | { max?: number | undefined; min?: number | undefined; }
-
The size attribute for input element. Useful for controlling input size in flexboxes.
label*
Required
ReactNode
-
Label text or react component
labelPlacement
"top" | "bottom" | { error?: Placement | undefined; description?: Placement | undefined; }
-
Set the placement of the error and description. Does not affect inline mode.
options*
Required
SelectOptionProps[]
-
An arrary of objects conforming to OptionProps interface.
padding
any
-
Overide the padding setting of the element
required
boolean
-
Adds mark to label
rows
number
-
The approximate number of rows to display on menu.
size
"small" | "medium"
medium
Preset size spacing settings
value
string
-
The selected option's value.
width
any
-
A tokens space key value setting the width of the parent element.

Option Props
#

name
type
default
description
disabled
boolean
-
If true, prevents user interaction with option.
label
string
-
The human readable text for the option.
node
ReactNode
-
A react node that acts as the label as an alternative to the label prop.
prefix
ReactNode
-
The text or component inserted before the label.
value*
Required
string
-
The value of the option.

Messages
#

<Card>
<Select
description="Description message"
error="Error message"
label="Label text"
labelSecondary="Label secondary text"
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{ value: '4', label: 'Four', prefix: <DuplicateSVG />, disabled: true },
]}
/>
</Card>

Disabled
#

<Card>
<Select
disabled
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{ value: '4', label: 'Four', prefix: <DuplicateSVG />, disabled: true },
]}
selected={{ value: '1', label: 'One', prefix: <EthSVG /> }}
/>
</Card>

Autocomplete
#

<Card>
<Select
autocomplete
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{ value: '4', label: 'Four', prefix: <DuplicateSVG />, disabled: true },
]}
selected={{ value: '1', label: 'One', prefix: <EthSVG /> }}
/>
</Card>

Createable
#

<>
<Card>
<Select
createable
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{ value: '4', label: 'Four', prefix: <DuplicateSVG />, disabled: true },
]}
/>
</Card>
</>

Rows
#

<Card>
<Select
autocomplete
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{
value: '4',
label: 'Four',
prefix: <DuplicateSVG />,
disabled: true,
},
{ value: '5', label: 'Four', prefix: <DuplicateSVG /> },
]}
rows={3}
tabIndex="2"
/>
</Card>

Direction
#

<DeleteMe>
<div style={{ height: '200px' }} />
<Select
createable
direction="up"
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{
value: '4',
label: 'Four',
prefix: <DuplicateSVG />,
disabled: true,
},
{ value: '5', label: 'Four', prefix: <DuplicateSVG /> },
]}
tabIndex="2"
/>
</DeleteMe>

InputSize
#

<DeleteMe flexDirection="row" justifyContent="flex-start">
<div>
<Select
createable
inputSize={{
min: 5,
max: 20,
}}
options={[
{ value: '0', label: 'Zero' },
{ value: '1', label: 'One', prefix: <EthSVG /> },
{ value: '2', label: 'Two', prefix: <FlagSVG /> },
{ value: '3', label: 'Three', prefix: <MoonSVG /> },
{
value: '4',
label: 'Four',
prefix: <DuplicateSVG />,
disabled: true,
},
{ value: '5', label: 'Four', prefix: <DuplicateSVG /> },
]}
rows={3}
tabIndex="2"
/>
</div>
</DeleteMe>
Edit on GitHub