Select

Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list. When text is inserted on the input field, filter the options. Consider showing suggestions when the select is active.

Best practices

Order the list by frequency of use, and if applicable, in ascending order.
For situations where the user can select more than one option, use using Multi Select.
Avoid using the select input of data that is known to the user, such as birth dates.

Example

Selected item: [none]

Favorite pasta*

import { Select, Text, VFlow } from '@lemonade/ui'
import React, { useState } from 'react'

const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']

function SelectDemo() {
  const [value, setValue] = useState()

  const handleChange = (item: string) => setValue(item)

  const itemToString = (item: string) => item

  return (
    <VFlow>
      <Text>Selected item: {value || '[none]'}</Text>
      <Select<string>
        label='Favorite pasta'
        items={items}
        value={value}
        onChange={handleChange}
        itemToString={itemToString}
        name='favorite pasta'
        required
      />
    </VFlow>
  )
}

export default SelectDemo

Suggestion

Allow select value to be whatever the user types, by providing a createNewItem prop.

You can use the prop openOnFocus to control whether the suggestion menu should appear when input receives focus - default is false for suggestion selects (when createNewItem) and true for normal selects.

Selected item: [none]

Favorite pasta*

import { Select, Text, VFlow } from '@lemonade/ui'
import React, { useState } from 'react'

const items = ['Carbonara', 'Gnocchi', 'Lasagna', 'Macaroni and Cheese', 'Pesto', 'Pizza']

function SuggestionDemo() {
  const [value, setValue] = useState()

  const handleChange = (item: string) => setValue(item)

  const itemToString = (item: string) => item
  const createNewItem = (inputValue: string) => inputValue

  return (
    <VFlow>
      <Text>Selected item: {value || '[none]'}</Text>
      <Select<string>
        value={value}
        label='Favorite pasta'
        name='favorite pasta'
        items={items}
        onChange={handleChange}
        itemToString={itemToString}
        createNewItem={createNewItem}
        icon={null}
        required
      />
    </VFlow>
  )
}

export default SuggestionDemo