Components
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
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 Inputs are available in two sizes: small
and large
. large
is the default size.
The isDisabled
prop disables the TextInput
visually and functionally.
The hasError
prop only changes the input’s color. It should be used alongside an error message that helps users advance through the form.
You can use the InputRow
component to attach a Button
to a Text Input
.
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.
id
Adds a HTML id
attribute to the input. This is used for linking the HTML with a
Label.
string
isDisabled
Visually and functionally disable the input.
boolean
false
isReadOnly
Adds readonly
HTML attribute, allowing users to select (but not modify) the input.
boolean
false
isRequired
Adds the required
HTML attribute.
boolean
false
pattern
A regular expression that the <input>
element’s value is checked against when submitting a
form.
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
.
number
max
The maximum value that can be entered. Valid when type=number
.
number
min
The minimum value that can be entered. Valid when type=number
.
number
step
The granularity of values that can be entered. Valid when type=number
.
number
hasError
Makes the text and border color red.
boolean
false
placeholder
Text that appears within the input when there is no value
.
string
size
Controls the height and padding of the input.
This prop can be one of the following 2 types:
'small'
'large'
'large'
type
Sets the type
attribute on the input element.
This prop can be one of the following 6 types:
'email'
'password'
'text'
'search'
'tel'
'number'
'text'
inputMode
A proposed specification that enables specification of virtual keyboard type in Chrome. Currently only supported in Chrome and Android.
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.
string
value
The current value of the input.
This prop can be one of the following 2 types:
string
number
''
innerLeft
Content that appears within the input on the left.
React.ReactNode
innerRight
Content that appears within the input on the right.
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.
(value: string, event: React.ChangeEvent<HTMLInputElement>) => void
(): void => {}
onClick
Function that fires when you click into the input.
(event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void
(): void => {}
onFocus
Fires when the input gains focus.
(event: React.FocusEvent<HTMLInputElement>) => void
(): void => {}
onBlur
Fires when the input loses focus, regardless of whether the value has changed.
(event: React.FocusEvent<HTMLInputElement>) => void
(): void => {}
onKeyDown
Fires when a key is pressed down with the input focused.
(event: React.KeyboardEvent<HTMLInputElement>) => void
(): void => {}
onKeyUp
Fires when a key press is released with the input focused.
(event: React.KeyboardEvent<HTMLInputElement>) => void
(): void => {}
onKeyPress
Fires when a valid key input is made.
Note: This event is deprecated in the DOM APIs. Use `onKeyDown` or `onKeyUp` instead.
(event: React.KeyboardEvent<HTMLInputElement>) => void
(): 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.
boolean
false
dataTest
A selector hook into the React component for use in automated testing environments. It is
applied internally to the <input />
element.
string
autoComplete
This tells the browser whether to attempt autocompletion of the input. Supports all values.
React.InputHTMLAttributes<HTMLInputElement>['autoComplete']
Component that helps position icons within inputs.
children
An icon component from Thumbprint Icons.
You should pair “Medium” icons with large
inputs and “Small” icons with small
inputs.
React.ReactNode
color
Set the icon color with a color from Thumbprint Tokens.
string
'inherit'
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
() => void