Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

TextInput

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

<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" />
</Arrange>

<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" />
</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>

<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>

<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>

<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={() => {}} />

<TextInput hasError value="Some value" onChange={() => {}} />

Disabled

<TextInput isDisabled placeholder="Some value" />

<TextInput isDisabled placeholder="Some value" />

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

() => {
  const ref = useRef(null)
  const onButtonClick = () => ref.current.focus()
  return (
    <>
      <Spacer bottom="small">
        <Button onClick={onButtonClick}>Focus</Button>
      </Spacer>
      <TextInput ref={ref} />
    </>
  )
}

Props

name

type

default

type

'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

string

hasError

boolean

addOn

React.ReactNode

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

TextInput

Purpose

Dos

Don’ts

Usage

With icon

Add on

Sizes

Type

With error

Disabled

Forwarding refs

Props