Components

Text Input(React)

Form inputs with sizes and style variations.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { TextInput, TextInputIcon, TextInputClearButton } from '@thumbtack/thumbprint-react';`

TextInput with an icon and clear button

TextInput 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 in a useState variable. The onChange function will set the new value when the user enters or removes a character in the input.

Street address

function ClearableTextInput() {
    const [value, setValue] = React.useState('1355 Market St.');

    return (
        <div>
            <Label for="example-1">Street address</Label>
            <TextInput
                id="example-1"
                value={value}
                placeholder="Enter an address"
                innerLeft={
                    <TextInputIcon>
                        <ContentModifierMapPinMedium />
                    </TextInputIcon>
                }
                innerRight={<TextInputClearButton onClick={() => setValue('')} />}
                onChange={setValue}
            />
        </div>
    );
}

function ClearableTextInput() {
    const [value, setValue] = React.useState('1355 Market St.');
    return (
        <div>
            <Label for="example-1">Street address</Label>
            <TextInput
                id="example-1"
                value={value}
                placeholder="Enter an address"
                innerLeft={
                    <TextInputIcon>
                        <ContentModifierMapPinMedium />
                    </TextInputIcon>
                }
                innerRight={<TextInputClearButton onClick={() => setValue('')} />}
                onChange={setValue}
            />
        </div>
    );
}

Text Input sizes

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

Small input

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);

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

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);
    return (
        <TextInput
            size="small"
            value={value}
            placeholder="example@example.com"
            onChange={setValue}
        />
    );
}

Large input

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);

    return (
        <TextInput
            size="large"
            value={value}
            placeholder="example@example.com"
            onChange={setValue}
        />
    );
}

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);
    return (
        <TextInput
            size="large"
            value={value}
            placeholder="example@example.com"
            onChange={setValue}
        />
    );
}

Disabled inputs

The isDisabled prop disables the TextInput visually and functionally.

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);

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

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);
    return (
        <TextInput isDisabled value={value} placeholder="example@example.com" onChange={setValue} />
    );
}

Text 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.

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);

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

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);
    return (
        <TextInput hasError value={value} placeholder="example@example.com" onChange={setValue} />
    );
}

Button attached to an input

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

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);

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

function TextInputExample() {
    const [value, setValue] = React.useState(undefined);
    return (
        <InputRow widthRatios={[1, null]}>
            <TextInput placeholder="Enter a zip code" onChange={setValue} 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

TextInput

id
Adds a HTML id attribute to the input. This is used for linking the HTML with a Label.
Type
string
isDisabled
Visually and functionally disable the input.
Type
boolean
Default
false
isReadOnly
Adds readonly HTML attribute, allowing users to select (but not modify) the input.
Type
boolean
Default
false
isRequired
Adds the required HTML attribute.
Type
boolean
Default
false
pattern
A regular expression that the <input> element’s value is checked against when submitting a form.
Type
string
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
number
max
The maximum value that can be entered. Valid when type=number.
Type
number
min
The minimum value that can be entered. Valid when type=number.
Type
number
step
The granularity of values that can be entered. Valid when type=number.
Type
number
hasError
Makes the text and border color red.
Type
boolean
Default
false
placeholder
Text that appears within the input when there is no value.
Type
string
size
Controls the height and padding of the input.
Type
This prop can be one of the following 2 types:
'small'
'large'
Default
'large'
type
Sets the type attribute on the input element.
Type
This prop can be one of the following 6 types:
'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
literal
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
value
The current value of the input.
Type
This prop can be one of the following 2 types:
string
number
Default
''
innerLeft
Content that appears within the input on the left.
Type
React.ReactNode
innerRight
Content that appears within the input on the right.
Type
React.ReactNode
onChange
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
(value: string, event: React.ChangeEvent<HTMLInputElement>) => void
Default
(): void => {}
onClick
Function that fires when you click into the input.
Type
(event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void
Default
(): void => {}
onFocus
Fires when the input gains focus.
Type
(event: React.FocusEvent<HTMLInputElement>) => void
Default
(): void => {}
onBlur
Fires when the input loses focus, regardless of whether the value has changed.
Type
(event: React.FocusEvent<HTMLInputElement>) => void
Default
(): void => {}
onKeyDown
Fires when a key is pressed down with the input focused.
Type
(event: React.KeyboardEvent<HTMLInputElement>) => void
Default
(): void => {}
onKeyUp
Fires when a key press is released with the input focused.
Type
(event: React.KeyboardEvent<HTMLInputElement>) => void
Default
(): void => {}
onKeyPress
deprecated
Fires when a valid key input is made.
Note: This event is deprecated in the DOM APIs. Use `onKeyDown` or `onKeyUp` instead.
Type
(event: React.KeyboardEvent<HTMLInputElement>) => void
Default
(): void => {}
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
boolean
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
autoComplete
This tells the browser whether to attempt autocompletion of the input. Supports all values.
Type
React.InputHTMLAttributes<HTMLInputElement>['autoComplete']

TextInputIcon

Component that helps position icons within inputs.

children
required
An icon component from Thumbprint Icons. You should pair “Medium” icons with large inputs and “Small” icons with small inputs.
Type
React.ReactNode
color
Set the icon color with a color from Thumbprint Tokens.
Type
string
Default
'inherit'

TextInputClearButton

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
Type
() => void