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="1fr" gap="small">
<TextInput placeholder="Type email" type="email" />
<TextInput placeholder="Type number" type="number" />
<TextInput placeholder="Type password" type="password" />
<TextInput placeholder="Type search" type="search" />
<TextInput placeholder="Type tel" type="tel" />
<TextInput placeholder="Type text" type="text" />
<TextInput placeholder="Type url" type="url" />
</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 inputEl = useRef(null)
const onButtonClick = () => inputEl.current.focus()
return (
<>
<Spacer bottom="small">
<Button onClick={onButtonClick}>Focus this TextInput</Button>
</Spacer>
<TextInput ref={inputEl} />
</>
)
}
Props
type
oneOf: 'email', 'number', 'password', 'search', 'tel', 'text', 'url'
'text'
size
oneOf: 'small', 'medium'
'medium'