Thumbprint logo

Text Input

Form inputs with sizes and style variations

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.

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

Large input
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} />
    );
}

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

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

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
    'small' | 'large'
    Default
    'large'
  • type
    Sets the type attribute on the input element.
    

    Type
    '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
    'numeric'
  • 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
    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