@thumbtack/tp-ui-react-select v3.3.3

package: '@thumbtack/tp-ui-react-select' kit: element/select.yaml platform: react

url: /api/components/element/select/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 this.state. The onChange function updates the state when the user selects a new option.

class SelelctExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            selected: 'ca',
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newValue) {
        this.setState({
            selected: newValue,
        });
    }

    render() {
        return (
            <div>
                <Label for="example-10490">Select a state</Label>
                <Select
                    id="example-10490"
                    size="large"
                    value={this.state.selected}
                    onChange={this.onChange}
                >
                    <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.

<React.Fragment>
    <Label for="example-49591">Select a state</Label>
    <Select id="example-49591" size="large" value="ca" onChange={() => {}}>
        <option value="ny">New York</option>
        <option value="ca">California</option>
        <option value="tn">Tennessee</option>
        <option value="fl">Florida</option>
    </Select>
</React.Fragment>

Small

<React.Fragment>
    <Label for="example-96563">Select a state</Label>
    <Select id="example-96563" size="small" value="ca" onChange={() => {}}>
        <option value="ny">New York</option>
        <option value="ca">California</option>
        <option value="tn">Tennessee</option>
        <option value="fl">Florida</option>
    </Select>
</React.Fragment>

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

<Select isFullWidth value="ca" onChange={() => {}}>
    <option value="ny">New York</option>
    <option value="ca">California</option>
    <option value="tn">Tennessee</option>
    <option value="fl">Florida</option>
</Select>

Disabled selects

The isDisabled prop visually and functionally disables the Select.

<React.Fragment>
    <Label for="example-14348" isDisabled>
        Select a state
    </Label>
    <Select id="example-14348" isDisabled value="ca" onChange={() => {}}>
        <option value="ny">New York</option>
        <option value="ca">California</option>
        <option value="tn">Tennessee</option>
        <option value="fl">Florida</option>
    </Select>
</React.Fragment>

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.

<React.Fragment>
    <Label for="example-10381" hasError>
        Select a state
    </Label>
    <Select id="example-10381" hasError value="ca" onChange={() => {}}>
        <option value="ny">New York</option>
        <option value="ca">California</option>
        <option value="tn">Tennessee</option>
        <option value="fl">Florida</option>
    </Select>
</React.Fragment>