Select

Select element input


import { CopySVG, 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: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      {
        value: '4',
        label: 'Four',
        prefix: <CopySVG />,
        disabled: true,
      },
      { value: '5', label: 'Four', prefix: <CopySVG /> },
    ]}
    placeholder="Select an option..."
    tabIndex="2"
  />
</Card>

Props
#

name	type	default	description
align	"left" \| "right"	-	If the option list is wider than the select, which
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.
id	string	-	The id attribute of div element.
onChange	ChangeEventHandler<HTMLInputElement>	-	The handler for change events.
error	ReactNode	-	Error text or a react component.
hideLabel	boolean	-	If true, hides the label and secondary label.
inline	boolean	-	If true, moves the label and status messages to the right of the content.
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
labelSecondary	ReactNode	-	Secondary text or react component
padding	any	-	Overide the padding setting of the element
readOnly	boolean	false	If true, sets the select component into read only mode If true, will set the Fields component to read only mode
size	"small" \| "medium"	medium	Preset size spacing settings
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
name	string	-	The name property of an input element.
options* Required	SelectOptionProps[]	-	An arrary of objects conforming to OptionProps interface.
ref	null \| string \| (instance: HTMLInputElement \| null) => void \| RefObject<HTMLInputElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
required	boolean	-	Adds mark to label
reverse	boolean	-	Have label appear on the left of the form element.
rows	number	-	The approximate number of rows to display on menu.
showBorder	boolean	-	If true, show a border around the select component *
showDot	boolean	false	If true will show the indicator dot
validated	boolean	-	If true and showDot is true, will show a green indicator
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
color	Colors	-	The color of the option.
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.

Show Dot
#

<DeleteMe>
  <Select
    description="Select with placeholder"
    label="Placeholder"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
  />
  <Select
    description="Select with placeholder"
    label="Validated"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
    validated
    value="2"
  />
  <Select
    description="Select with placeholder"
    error="Error message"
    label="Error"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
  />
  <Select
    description="Select with placeholder"
    disabled
    label="Disabled"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
  />
</DeleteMe>

Align
#

<DeleteMe flexDirection="row" justifyContent="space-between">
  <div>
    <Select
      align="left"
      label="Label text"
      options={[
        { value: '0', label: 'Zero' },
        { value: '1', label: 'One', prefix: <EthSVG /> },
        { value: '2', label: 'Two', prefix: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
      ]}
    />
  </div>
  <div>
    <Select
      align="right"
      label="Label text"
      options={[
        { value: '0', label: 'Zero' },
        { value: '1', label: 'One', prefix: <EthSVG /> },
        { value: '2', label: 'Two', prefix: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
      ]}
    />
  </div>
</DeleteMe>

Size
#

<DeleteMe>
  <Select
    label="Small"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
    ]}
    size="small"
  />
  <Select
    label="Medium"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
    ]}
    size="medium"
  />
</DeleteMe>

Disabled
#

<Card>
  <Select
    disabled
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, 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: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG />, color: 'redPrimary' },
      { value: '4', label: 'Four', prefix: <CopySVG />, 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: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
      ]}
    />
  </Card>
</>

Rows
#

<Card>
  <Select
    autocomplete
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      {
        value: '4',
        label: 'Four',
        prefix: <CopySVG />,
        disabled: true,
      },
      { value: '5', label: 'Four', prefix: <CopySVG /> },
    ]}
    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: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      {
        value: '4',
        label: 'Four',
        prefix: <CopySVG />,
        disabled: true,
      },
      { value: '5', label: 'Four', prefix: <CopySVG /> },
    ]}
    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: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        {
          value: '4',
          label: 'Four',
          prefix: <CopySVG />,
          disabled: true,
        },
        { value: '5', label: 'Four', prefix: <CopySVG /> },
      ]}
      rows={3}
      tabIndex="2"
    />
  </div>
</DeleteMe>

Read Only
#

<DeleteMe>
  <Select
    createable
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      {
        value: '4',
        label: 'Four',
        prefix: <CopySVG />,
        disabled: true,
      },
      { value: '5', label: 'Four', prefix: <CopySVG /> },
    ]}
    readOnly
    tabIndex="2"
    value="1"
  />
</DeleteMe>

Edit on GitHub