Textarea
A multi-line text input with auto-sizing via field-sizing: content.
Usage
<textarea class="zui-textarea" placeholder="Write something..."></textarea>import { Textarea } from '@mrmartineau/zui/react'
<Textarea placeholder="Write something..." />---
import { Textarea } from '@mrmartineau/zui/astro'
---
<Textarea placeholder="Write something..." />import { Textarea } from '@mrmartineau/zui/solid'
<Textarea placeholder="Write something..." /><script lang="ts">
import { Textarea } from '@mrmartineau/zui/svelte'
let value = $state('')
</script>
<Textarea placeholder="Write something..." bind:value /><template>
<Textarea placeholder="Write something..." />
</template>
<script setup>
import { Textarea } from '@mrmartineau/zui/vue'
</script>With Label
<div class="zui-field">
<label class="zui-label" for="message">Message</label>
<textarea class="zui-textarea" id="message" placeholder="Your message..."></textarea>
</div>import { Field, Label, Textarea } from '@mrmartineau/zui/react'
<Field>
<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="Your message..." />
</Field>---
import { Field, Label, Textarea } from '@mrmartineau/zui/astro'
---
<Field>
<Label for="message">Message</Label>
<Textarea id="message" placeholder="Your message..." />
</Field>import { Field, Label, Textarea } from '@mrmartineau/zui/solid'
<Field>
<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="Your message..." />
</Field><script lang="ts">
import { Field, Label, Textarea } from '@mrmartineau/zui/svelte'
</script>
<Field>
<Label for="message">Message</Label>
<Textarea id="message" placeholder="Your message..." />
</Field><template>
<Field>
<Label for="message">Message</Label>
<Textarea id="message" placeholder="Your message..." />
</Field>
</template>
<script setup>
import { Field, Label, Textarea } from '@mrmartineau/zui/vue'
</script>Invalid State
<textarea class="zui-textarea" aria-invalid="true">This field has an error</textarea>import { Textarea } from '@mrmartineau/zui/react'
<Textarea aria-invalid="true" defaultValue="This field has an error" />---
import { Textarea } from '@mrmartineau/zui/astro'
---
<Textarea aria-invalid="true">This field has an error</Textarea>import { Textarea } from '@mrmartineau/zui/solid'
<Textarea aria-invalid="true" defaultValue="This field has an error" /><script lang="ts">
import { Textarea } from '@mrmartineau/zui/svelte'
</script>
<Textarea aria-invalid="true" value="This field has an error" /><template>
<Textarea aria-invalid="true" value="This field has an error" />
</template>
<script setup>
import { Textarea } from '@mrmartineau/zui/vue'
</script>Disabled
<textarea class="zui-textarea" disabled>Cannot edit this</textarea>import { Textarea } from '@mrmartineau/zui/react'
<Textarea disabled defaultValue="Cannot edit this" />---
import { Textarea } from '@mrmartineau/zui/astro'
---
<Textarea disabled>Cannot edit this</Textarea>import { Textarea } from '@mrmartineau/zui/solid'
<Textarea disabled defaultValue="Cannot edit this" /><script lang="ts">
import { Textarea } from '@mrmartineau/zui/svelte'
</script>
<Textarea disabled value="Cannot edit this" /><template>
<Textarea disabled value="Cannot edit this" />
</template>
<script setup>
import { Textarea } from '@mrmartineau/zui/vue'
</script>Shape
Use the shape prop to change the corners. It works the same as on Button: default (rounded), hard (square), soft (pill) and squircle. On a textarea, soft uses --radius-3xl instead of a full pill, so text in the corners is not cut off.
A squircle is a rounded square with smooth corners. Browsers without corner-shape support show normal rounded corners. To make squircle the default everywhere, see Squircle.
<div class="zui-field">
<label class="zui-label" for="default-textarea">Default (rounded)</label>
<textarea class="zui-textarea" id="default-textarea" placeholder="Type here"></textarea>
</div>
<div class="zui-field">
<label class="zui-label" for="hard-textarea">Hard</label>
<textarea class="zui-textarea zui-textarea-shape-hard" id="hard-textarea" placeholder="Type here"></textarea>
</div>
<div class="zui-field">
<label class="zui-label" for="soft-textarea">Soft</label>
<textarea class="zui-textarea zui-textarea-shape-soft" id="soft-textarea" placeholder="Type here"></textarea>
</div>
<div class="zui-field">
<label class="zui-label" for="squircle-textarea">Squircle</label>
<textarea class="zui-textarea zui-textarea-shape-squircle" id="squircle-textarea" placeholder="Type here"></textarea>
</div>import { Field, Label, Textarea } from '@mrmartineau/zui/react'
<Field>
<Label htmlFor="default-textarea">Default (rounded)</Label>
<Textarea id="default-textarea" placeholder="Type here" />
</Field>
<Field>
<Label htmlFor="hard-textarea">Hard</Label>
<Textarea shape="hard" id="hard-textarea" placeholder="Type here" />
</Field>
<Field>
<Label htmlFor="soft-textarea">Soft</Label>
<Textarea shape="soft" id="soft-textarea" placeholder="Type here" />
</Field>
<Field>
<Label htmlFor="squircle-textarea">Squircle</Label>
<Textarea shape="squircle" id="squircle-textarea" placeholder="Type here" />
</Field>---
import { Field, Label, Textarea } from '@mrmartineau/zui/astro'
---
<Field>
<Label for="default-textarea">Default (rounded)</Label>
<Textarea id="default-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-textarea">Hard</Label>
<Textarea shape="hard" id="hard-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-textarea">Soft</Label>
<Textarea shape="soft" id="soft-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-textarea">Squircle</Label>
<Textarea shape="squircle" id="squircle-textarea" placeholder="Type here" />
</Field>import { Field, Label, Textarea } from '@mrmartineau/zui/solid'
<Field>
<Label for="default-textarea">Default (rounded)</Label>
<Textarea id="default-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-textarea">Hard</Label>
<Textarea shape="hard" id="hard-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-textarea">Soft</Label>
<Textarea shape="soft" id="soft-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-textarea">Squircle</Label>
<Textarea shape="squircle" id="squircle-textarea" placeholder="Type here" />
</Field><script lang="ts">
import { Field, Label, Textarea } from '@mrmartineau/zui/svelte'
</script>
<Field>
<Label for="default-textarea">Default (rounded)</Label>
<Textarea id="default-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-textarea">Hard</Label>
<Textarea shape="hard" id="hard-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-textarea">Soft</Label>
<Textarea shape="soft" id="soft-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-textarea">Squircle</Label>
<Textarea shape="squircle" id="squircle-textarea" placeholder="Type here" />
</Field><template>
<Field>
<Label for="default-textarea">Default (rounded)</Label>
<Textarea id="default-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="hard-textarea">Hard</Label>
<Textarea shape="hard" id="hard-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="soft-textarea">Soft</Label>
<Textarea shape="soft" id="soft-textarea" placeholder="Type here" />
</Field>
<Field>
<Label for="squircle-textarea">Squircle</Label>
<Textarea shape="squircle" id="squircle-textarea" placeholder="Type here" />
</Field>
</template>
<script setup>
import { Field, Label, Textarea } from '@mrmartineau/zui/vue'
</script>CSS custom properties
Set these on :root, on a wrapper, or on the element. See Component custom properties.
| Property | Default | Description |
|---|---|---|
--zui-textarea-radius |
var(--radius-lg) |
Border radius |
--zui-textarea-border |
var(--color-border) |
Border colour |
--zui-textarea-bg |
var(--color-background) |
Background colour |
--zui-textarea-fg |
var(--color-text) |
Text colour |
--zui-textarea-padding |
var(--space-xs) |
Padding inside the textarea |
--zui-textarea-font-size |
var(--step-0) |
Font size |
--zui-textarea-focus-border |
var(--color-theme) |
Border colour on focus |
--zui-textarea-min-height |
6rem |
Minimum height |