@thumbtack/tp-ui-react-input v5.3.1

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

url: /api/components/element/input/react/

import Alert from './../../../../www/src/components/alert';

Input with an icon and clear button

Input is a controlled component. This means that the visible text will always match the contents of the value prop.

In this example, notice how value is stored within this.state. The onChange function will set the new value when the user enters or removes a character in the input.

class ClearableInput extends React.Component {
    constructor() {
        super();

        this.state = {
            inputText: '1355 Market St.',
        };
    }

    render() {
        return (
            <div>
                <Label for="example-28402">Street address</Label>
                <Input
                    id="example-28402"
                    value={this.state.inputText}
                    placeholder="Enter an address"
                    innerLeft={
                        <InputIcon>
                            <ContentModifierMapPinMedium />
                        </InputIcon>
                    }
                    innerRight={
                        <InputClearButton
                            onClick={() => {
                                this.setState({
                                    inputText: '',
                                });
                            }}
                        />
                    }
                    onChange={text => {
                        this.setState({
                            inputText: text,
                        });
                    }}
                />
            </div>
        );
    }
}

Input sizes

Inputs are available in two sizes: small and large. large is the default size.

Small input

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

        this.state = {
            value: undefined,
        };

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

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return (
            <Input
                size="small"
                value={value}
                placeholder="example@example.com"
                onChange={this.onChange}
            />
        );
    }
}

Large input

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

        this.state = {
            value: undefined,
        };

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

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return <Input value={value} placeholder="example@example.com" onChange={this.onChange} />;
    }
}

Disabled inputs

The isDisabled prop disables the Input visually and functionally.

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

        this.state = {
            value: undefined,
        };

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

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return (
            <Input
                isDisabled
                placeholder="example@example.com"
                value={value}
                onChange={this.onChange}
            />
        );
    }
}

Input with an error

The hasError prop only changes the input’s color. It should be used alongside an error message that helps users advance through the form.

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

        this.state = {
            value: undefined,
        };

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

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return (
            <Input
                hasError
                placeholder="example@example.com"
                value={value}
                onChange={this.onChange}
            />
        );
    }
}

Button attached to an input

You can use the InputRow component to attach a Button to an Input.

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

        this.state = {
            value: undefined,
        };

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

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return (
            <InputRow widthRatios={[1, null]}>
                <Input placeholder="Enter a zip code" onChange={this.onChange} value={value} />
                <Button>Find a pro</Button>
            </InputRow>
        );
    }
}