Usage
import { TextInput } from '@loomhq/lens'
<TextInput />
With icon
<TextInput placeholder="Search" icon={<SvgSearch />} />
See the Icon set.
Sizes
<Arrange columns="1fr" gap="small">
<TextInput placeholder="Placeholder" size="small" />
<TextInput placeholder="Placeholder" size="medium" />
</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
<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} />
</>
)
}
Props
type
'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'
'text'
size
'small' | 'medium'
'medium'
onFocus
React.ReactEventHandler
onChange
React.ReactEventHandler
onBlur
React.ReactEventHandler
onKeyDown
React.ReactEventHandler