Components

Input(React)

Form inputs with sizes and style variations.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { Input, InputIcon, InputClearButton } from '@thumbtack/thumbprint-react';

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>
        );
    }
}

Date inputs

Because of browser UI inconsistencies we do not use

type=‘date’
and instead suggest using a separate text
input
or
select
elements to gather this information from users.

Props

Input

  • id

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

    Type
    string
    Default
    undefined
  • isDisabled

    Visually and functionally disable the input.

    Type
    bool
    Default
    false
  • isReadOnly

    Adds readonly HTML attribute, allowing users to select (but not modify) the input.

    Type
    bool
    Default
    false
  • isRequired

    Adds the required HTML attribute.

    Type
    bool
    Default
    false
  • pattern

    A regular expression that the <input> element’s value is checked against when submitting a form.

    Type
    string
    Default
    undefined
  • maxLength

    The maximum number of characters that a user can enter. onChange will not fire if a user enters a character that exceeds maxLength.

    Type
    string
    Default
    undefined
  • hasError

    Makes the text and border color red.

    Type
    bool
    Default
    false
  • placeholder

    Text that appears within the input when there is no value.

    Type
    string
    Default
    undefined
  • size

    Controls the height and padding of the input.

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

    Sets the type attribute on the input element.

    Type
    oneOf([
      'email',
      'password',
      'text',
      'search',
      'tel',
      'number',
    ]);
    Default
    'text'
  • inputMode

    A proposed specification that enables specification of virtual keyboard type in Chrome. Currently only supported in Chrome and Android.

    Type
    oneOf([
      'numeric',
    ]);
    Default
    undefined
  • name

    The HTML name attribute that will be pased to the input. It is required if working with a form that uses <form action="" method=""> to submit data to a server.

    Type
    string
    Default
    undefined
  • value

    The current value of the input.

    Type
    union
    Default
    ''
  • innerLeft

    Content that appears within the input on the left.

    Type
    node
    Default
    undefined
  • innerRight

    Content that appears within the input on the right.

    Type
    node
    Default
    undefined
  • onChange
    required

    The function that is called when the input value changes.

    It receives two arguments: onChange(newValue, event).

    The consumer of this component should use that data to update the value prop passed in to this component.

    Type
    func
  • onClick

    Function that fires when you click into the input.

    Type
    func
    Default
    undefined
  • onFocus

    Fires when the input gains focus.

    Type
    func
    Default
    undefined
  • onBlur

    Fires when the input loses focus, regardless of whether the value has changed.

    Type
    func
    Default
    undefined
  • onKeyDown

    Fires when a key is pressed down with the input focused.

    Type
    func
    Default
    undefined
  • onKeyUp

    Fires when a key press is released with the input focused.

    Type
    func
    Default
    undefined
  • shouldFocusOnPageLoad

    This tells the browser to give the input focus when the page is loaded. This can only be used once on a page.

    Type
    bool
    Default
    false
  • dataTest

    A selector hook into the React component for use in automated testing environments. It is applied internally to the <input /> element.

    Type
    string
    Default
    undefined
  • autoComplete

    This tells the browser whether to attempt autocompletion of the input. Supports all values.

    Type
    string
    Default
    undefined

InputIcon

Component that helps position icons within inputs.

  • color

    Set the icon color with a color from Thumbprint Tokens.

    Type
    string
    Default
    'inherit'
  • children
    required

    An icon component from Thumbprint Icons.

    You should pair “Medium” icons with large inputs and “Small” icons with small inputs.

    Type
    node

InputClearButton

Accessible button that makes it easy to add a “Clear” button to a text input. It should be used with the innerRight prop in Input.

  • onClick
    required

    Function that runs when the clear button is clicked on. This should set Input’s value to an empty string.

    Type
    func