Components

Select(React)

Dropdown for selecting an item from a larger set.

Version:7.0.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { Select } from '@thumbtack/thumbprint-react';

Select dropdown with state management

Select is a controlled component. This means that the selected option, if any, must be provided as the value prop. The onChange function updates the value when the user selects a new option.

In this example, notice how value is stored within a React.useState object. The onChange function updates the state when the user selects a new option.

function SelectExample() {
    const [value, setValue] = React.useState('ca');

    return (
        <div>
            <Label for="example-1">Select a state</Label>
            <Select id="example-1" size="large" value={value} onChange={v => setValue(v)}>
                <option value="ny">New York</option>
                <option value="ca">California</option>
                <option value="tn">Tennessee</option>
                <option value="fl">Florida</option>
            </Select>
        </div>
    );
}

Select dropdown sizes

Large

This is the default size for Select dropdowns.

function SelectExample() {
    const [value, setValue] = React.useState('ca');

    return (
        <div>
            <Label for="example-2">Select a state</Label>
            <Select id="example-2" size="large" value={value} onChange={v => setValue(v)}>
                <option value="ny">New York</option>
                <option value="ca">California</option>
                <option value="tn">Tennessee</option>
                <option value="fl">Florida</option>
            </Select>
        </div>
    );
}

Small

function SelectExample() {
    const [value, setValue] = React.useState('ca');

    return (
        <div>
            <Label for="example-3">Select a state</Label>
            <Select id="example-3" size="small" value={value} onChange={v => setValue(v)}>
                <option value="ny">New York</option>
                <option value="ca">California</option>
                <option value="tn">Tennessee</option>
                <option value="fl">Florida</option>
            </Select>
        </div>
    );
}

Widths

By default, the Select component renders as an inline-block element. Its width is determined by the option with the longest text.

The isFullWidth prop can be used to set the width to 100%.

Full width

function SelectExample() {
    const [value, setValue] = React.useState('ca');

    return (
        <div>
            <Label for="example-4">Select a state</Label>
            <Select id="example-4" isFullWidth value={value} onChange={v => setValue(v)}>
                <option value="ny">New York</option>
                <option value="ca">California</option>
                <option value="tn">Tennessee</option>
                <option value="fl">Florida</option>
            </Select>
        </div>
    );
}

Disabled selects

The isDisabled prop visually and functionally disables the Select.

function SelectExample() {
    const [value, setValue] = React.useState('ca');

    return (
        <div>
            <Label for="example-5">Select a state</Label>
            <Select id="example-5" isDisabled value={value} onChange={v => setValue(v)}>
                <option value="ny">New York</option>
                <option value="ca">California</option>
                <option value="tn">Tennessee</option>
                <option value="fl">Florida</option>
            </Select>
        </div>
    );
}

Select dropdown with an error

The hasError prop can be used to visually represent an error.

This prop only changes the select dropdown’s color. It should be used alongside an error message that helps users advance through the form.

function SelectExample() {
    const [value, setValue] = React.useState('ca');

    return (
        <div>
            <Label for="example-6">Select a state</Label>
            <Select id="example-6" hasError value={value} onChange={v => setValue(v)}>
                <option value="ny">New York</option>
                <option value="ca">California</option>
                <option value="tn">Tennessee</option>
                <option value="fl">Florida</option>
            </Select>
        </div>
    );
}

Props

Select

  • children

    A collection of HTML <option> elements.

    Type
    node
    Default
    undefined
  • id

    Adds a HTML id attribute to the select. This is used for linking the HTML with a Label.

    Type
    string
    Default
    undefined
  • isDisabled

    Visually and functionally disables the select dropdown.

    Type
    bool
    Default
    false
  • isRequired

    Adds required HTML attribute to element, indicating that an option with a non-empty string value must be selected.

    Type
    bool
    Default
    false
  • hasError

    Makes the radio and text color red.

    Type
    bool
    Default
    false
  • size

    Changes the select’s font-size, height, and padding.

    Type
    oneOf([
      'small',
      'large',
    ])
    Default
    'large'
  • isFullWidth

    Set the <select>’s width to 100% as opposed to the default behavior of only taking up the necessary width.

    Type
    bool
    Default
    false
  • value
    required

    The value of the <option> that is selected. See React documentation on <select> and controlled components to learn more.

    Type
    string
  • onClick

    Function that is fired when the value of the select changes.

    Type
    func
    Default
    undefined
  • onChange
    required

    A function that is fired when the value of the select changes. The new value is passed to the function.

    Type
    func
  • onFocus

    Fires when the select receives focus.

    Type
    func
    Default
    undefined
  • onBlur

    Fires when the select loses focus.

    Type
    func
    Default
    undefined
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined
  • name

    Adds name HTML attribute to element, indicating the property name associated with the selected value.

    Type
    string
    Default
    undefined