Textarea
Multi-line text field.
Try it
Knobs
variant size --field-line is the line box the row maths are done in, so it has to be a real length rather than normal.
<script> import { Textarea } from 'omaris';</script><Textarea label="Notes" />Walkthrough
1. Basic
Same frame and states as Input, with rows instead of a height — for a note, an address, anything longer than a line.
The driver sees this.
<script lang="ts"> import { Textarea } from 'omaris'; let notes = $state('');</script><Textarea class="w-96 max-w-full" label="Delivery notes" placeholder="Gate code, floor, anything the driver should know" supportingText="The driver sees this." bind:value={notes}/>2. Autosize and counter
autosize grows the field with its content, up to maxRows, using a hidden mirror element — so the caret never scrolls out of view mid-sentence.
28/280
<script lang="ts"> import { Textarea } from 'omaris'; let bio = $state('Ships dashboards from Erbil.');</script><div class="flex w-full max-w-md flex-col gap-6"> <Textarea label="Bio" autosize rows={2} maxRows={8} counter maxlength={280} bind:value={bio} /> <Textarea label="Fixed at 3 rows" rows={3} value="This one does not grow." /></div>3. States
The supporting line becomes the error text when the field is invalid, so the reason is under the field and not in a toast.
At least 20 characters.
<script lang="ts"> import { Textarea } from 'omaris';</script><Textarea class="w-72 max-w-full" label="Required" required placeholder="Say something" /><Textarea class="w-72 max-w-full" label="Invalid" invalid value="Too short" supportingText="At least 20 characters."/><Textarea class="w-72 max-w-full" label="Disabled" disabled value="Read only" />