Components

Text Input(React)

Form inputs with sizes and style variations.

Version:14.18.2 View sourceChangelogReport 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.

Text Input sizes

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

Small input

Large input

Disabled inputs

The isDisabled prop disables the TextInput visually and functionally.

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.

Button attached to an input

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

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