Textarea
A native multi-line input that grows with its content, between rows and maxRows.
Grows with its content
Starts at rows lines and grows as you type.
length: 0
Code
<Label htmlFor="message">Your message</Label>
<Textarea value={state.message} placeholder="Type your message here." attrs={{ id: "message" }} />Usage
import { Textarea } from "@elements/ui/textarea";
<Textarea value={form.bio} placeholder="Tell us about yourself" />
<Textarea value={form.notes} rows={2} maxRows={8} />
<Textarea value={form.code} autosize={false} rows={10} resize="both" />Examples
Capped
rows=2, maxRows=5: grows to five lines, then scrolls.
Code
<Textarea value={state.notes} rows={2} maxRows={5} />Fixed size
autosize off: a fixed height the user can resize.
Code
<Textarea value={state.code} autosize={false} rows={6} resize="both" />With a button
Enter makes a new line; the button submits. maxlength stops at 140.
Code
<form onsubmit={() => send(state)}>
<Textarea value={state.draft} required maxlength={140} />
<Button type="submit" variant="primary">Send message</Button>
</form>States and sizes
Disabled, invalid and focus change color only.
Code
<Textarea disabled value="Disabled" />
<Textarea invalid value="Please enter a valid message." />
<Textarea size="sm" placeholder="Small" />
<Textarea size="lg" placeholder="Large" />Right to left
Text and placeholder follow the inline direction.