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

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.

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.

Type

With error

Disabled

Forwarding refs

Use the ref prop to access the DOM node.

More about forwarding refs.

Props

name
type
default
type
| 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week'
'text'
size
'small' | 'medium' | 'large'
'medium'
placeholder
string
value
string | number
onFocus
React.ReactEventHandler
onChange
React.ReactEventHandler
onBlur
React.ReactEventHandler
onKeyDown
React.ReactEventHandler
isDisabled
boolean
icon
React.ReactNode
id
string
hasError
boolean
addOn
React.ReactNode