Textarea

<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>

<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>

<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>

<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>