Components

Select(React)

Dropdown for selecting an item from a larger set.

Version:10.1.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.

Select dropdown sizes

Large

This is the default size for Select dropdowns.

Small

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

Disabled selects

The isDisabled prop visually and functionally disables the Select.

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.

Props

Select

  • children

    A collection of HTML <option> elements.

    Type
    React.ReactNode
  • id

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

    Type
    string
  • isDisabled

    Visually and functionally disables the select dropdown.

    Type
    boolean
    Default
    false
  • isRequired

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

    Type
    boolean
    Default
    false
  • hasError

    Makes the radio and text color red.

    Type
    boolean
    Default
    false
  • size

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

    Type

    This prop can be one of the following 2 types:

    • '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
    boolean
    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
    () => void
    Default
    (): void => {}
  • onChange
    required

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

    Type
    (value: string, event: React.ChangeEvent<HTMLSelectElement>) => void
  • onFocus

    Fires when the select receives focus.

    Type
    () => void
  • onBlur

    Fires when the select loses focus.

    Type
    () => void
  • dataTest

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

    Type
    string
  • name

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

    Type
    string