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