Usage
import { Textarea } from '@loomhq/lens'
<Textarea />
Rows
<Textarea
rows={2}
value={demoText.medium}
onChange={() => console.log()}
/>
Placeholder
<Textarea placeholder='Placeholder' />
Sizes
<Arrange columns="1fr" gap="small">
<Textarea placeholder="small" size="small" />
<Textarea placeholder="medium" size="medium" />
</Arrange>
Resize
<Arrange columns="1fr" gap="small">
<Textarea resize="none" placeholder="none" rows={1} />
<Textarea resize="both" placeholder="both" rows={1} />
<Textarea resize="horizontal" placeholder="horizontal" rows={1} />
<Textarea resize="vertical" placeholder="vertical" rows={1} />
</Arrange>
Disabled
<Textarea
isDisabled
rows={2}
value={demoText.long}
onChange={() => console.log()}
/>
Error
If the content of the textarea is invalid
<Textarea
rows={2}
value={demoText.short}
onChange={() => console.log()}
error="Invalid content"
/>
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 Textarea</Button>
</Spacer>
<Textarea ref={inputEl} />
</>
)
}
Props
size
'small' | 'medium'
'medium'
resize
'none' | 'both' | 'horizontal' | 'vertical'
'both'
onChange
React.ReactEventHandler