Deprecated
This component is deprecated. Please use @atlaskit/textfield
Purpose
A type of input field that is used to enter strings of text, numbers, or characters and are used often in forms and dialogs.
Dos
Match field width to the intended input
Use vertically stacked fields unless fields can logically be paired (first / last name, credit card expiry / CVV)
Add optional in-line links only at the end of the message and use sparingly
Use with the <FormField> component to add a label
Include a type (date, email, etc) that best matches the data
Don’ts
Use wide fields for inputs such as zip code, CVV, number of items, etc
Use all-uppercase in labels or placeholder text
Try not to use inputs without labels. If it can’t have a label visually, hide the label accessibly (srOnly in CSS utilities) and make sure placeholder text is visible
Usage
import { TextInput } from '@loomhq/lens'
<TextInput />
With icon
Accepts icon or image URL/Data URLs.
< Arrange columns = " 1fr " gap = " small " >
< TextInput placeholder = " Search " icon = { < SvgSearch /> } size = " small " />
< TextInput placeholder = " Search " icon = { < SvgSearch /> } size = " medium " />
< TextInput placeholder = " Search " icon = { < SvgSearch /> } size = " large " />
< TextInput placeholder = " Search " icon = " https://cdn.loom.com/assets/favicons-loom/favicon-32x32.png " size = " small " />
< TextInput placeholder = " Search " icon = " https://cdn.loom.com/assets/favicons-loom/favicon-32x32.png " size = " medium " />
< TextInput placeholder = " Search " icon = " https://cdn.loom.com/assets/favicons-loom/favicon-32x32.png " size = " large " />
</ Arrange >
See the Icon set .
Add on
Placed on the right side of the input field (opposite to Icon).
Best used with components such as Icon or IconButton.
< Arrange columns = " 1fr " gap = " small " >
< TextInput type = ' password ' placeholder = ' ••••••••••• ' size = ' small ' addOn = { < IconButton icon = { < SvgEye /> } /> } />
< TextInput size = " large " icon = { < SvgSearch /> } addOn = { < IconButton icon = { < SvgCode /> } /> } />
</ Arrange >
Sizes
medium (36px) is the default size and should cover most use cases.Use large size for landing pages and marketing pages.
Use small in modals, mobile and mobile web.
< Arrange columns = " 1fr " gap = " small " >
< TextInput placeholder = " Placeholder " size = " small " />
< TextInput placeholder = " Placeholder " size = " medium " />
< TextInput placeholder = " Placeholder " size = " large " />
</ Arrange >
Type
< Arrange columns = { [ 13 , "1fr" ] } gap = " small " >
date
< TextInput type = " date " />
datetime-local
< TextInput type = " datetime-local " />
email
< TextInput type = " email " />
month
< TextInput type = " month " />
number
< TextInput type = " number " />
password
< TextInput type = " password " />
search
< TextInput type = " search " />
tel
< TextInput type = " tel " />
text
< TextInput type = " text " />
time
< TextInput type = " time " />
url
< TextInput type = " url " />
week
< TextInput type = " week " />
</ Arrange >
With error
< TextInput hasError value = " Some value " onChange = { ( ) => { } } />
Disabled
< Arrange columns = " 1fr " gap = " small " >
< TextInput isDisabled placeholder = " Some value " />
< TextInput isDisabled placeholder = " Search " icon = { < SvgSearch /> } />
< TextInput isDisabled placeholder = " Search " icon = " https://cdn.loom.com/assets/favicons-loom/favicon-32x32.png " />
</ Arrange >
Forwarding refs
Use the ref prop to access the DOM node.
More about forwarding refs .
( ) => {
const ref = useRef ( null )
const onButtonClick = ( ) => ref . current . focus ( )
return (
< >
< Spacer bottom = " small " >
< Button onClick = { onButtonClick } > Focus </ Button >
</ Spacer >
< TextInput ref = { ref } />
</ >
)
}
Props
type
| 'date'
| 'datetime-local'
| 'email'
| 'month'
| 'number'
| 'password'
| 'search'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week'
'text'
size
'small' | 'medium' | 'large'
'medium'
onFocus
React.ReactEventHandler
onChange
React.ReactEventHandler
onBlur
React.ReactEventHandler
onKeyDown
React.ReactEventHandler
icon
React.ReactNode | string