Textareas

<x-textarea color="neutral" rows="2" placeholder="neutral" />
<x-textarea color="primary" rows="2" placeholder="primary" />
<x-textarea color="info" rows="2" placeholder="info" />
<x-textarea color="success" rows="2" placeholder="success" />
<x-textarea color="warning" rows="2" placeholder="warning" />
<x-textarea color="error" rows="2" placeholder="error" />

<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b5191858" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="neutral"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51918b3" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="primary"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-info focus-within:ring-1 focus-within:ring-info">
<textarea id="textarea_6a7e9b51918fd" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="info"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-success focus-within:ring-1 focus-within:ring-success">
<textarea id="textarea_6a7e9b5191943" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="success"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-warning focus-within:ring-1 focus-within:ring-warning">
<textarea id="textarea_6a7e9b5191989" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="warning"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error">
<textarea id="textarea_6a7e9b51919cc" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="error"></textarea>
</div>
</div>

<x-textarea appearance="soft" color="neutral" rows="2" placeholder="neutral" />
<x-textarea appearance="soft" color="primary" rows="2" placeholder="primary" />
<x-textarea appearance="soft" color="info" rows="2" placeholder="info" />
<x-textarea appearance="soft" color="success" rows="2" placeholder="success" />
<x-textarea appearance="soft" color="warning" rows="2" placeholder="warning" />
<x-textarea appearance="soft" color="error" rows="2" placeholder="error" />

<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b519a67a" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="neutral"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-primary/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b519a6d2" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="primary"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-info/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-info">
<textarea id="textarea_6a7e9b519a71e" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="info"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-success/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-success">
<textarea id="textarea_6a7e9b519a765" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="success"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-warning/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-warning">
<textarea id="textarea_6a7e9b519a7a9" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="warning"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-error/10 tune-border border-transparent focus-within:ring-1 focus-within:ring-error">
<textarea id="textarea_6a7e9b519a7ed" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="error"></textarea>
</div>
</div>

<x-textarea appearance="underline" color="neutral" rows="2" placeholder="neutral" />
<x-textarea appearance="underline" color="primary" rows="2" placeholder="primary" />
<x-textarea appearance="underline" color="info" rows="2" placeholder="info" />
<x-textarea appearance="underline" color="success" rows="2" placeholder="success" />
<x-textarea appearance="underline" color="warning" rows="2" placeholder="warning" />
<x-textarea appearance="underline" color="error" rows="2" placeholder="error" />

<div class="w-full">
<div class="block transition-colors bg-transparent border-b border-base-300 focus-within:border-primary">
<textarea id="textarea_6a7e9b51a359a" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="neutral"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors bg-transparent border-b border-primary">
<textarea id="textarea_6a7e9b51a35ee" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="primary"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors bg-transparent border-b border-info">
<textarea id="textarea_6a7e9b51a3638" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="info"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors bg-transparent border-b border-success">
<textarea id="textarea_6a7e9b51a367e" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="success"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors bg-transparent border-b border-warning">
<textarea id="textarea_6a7e9b51a36c2" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="warning"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors bg-transparent border-b border-error">
<textarea id="textarea_6a7e9b51a3704" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="error"></textarea>
</div>
</div>

<x-textarea appearance="ghost" color="neutral" rows="2" placeholder="neutral" />
<x-textarea appearance="ghost" color="primary" rows="2" placeholder="primary" />
<x-textarea appearance="ghost" color="info" rows="2" placeholder="info" />
<x-textarea appearance="ghost" color="success" rows="2" placeholder="success" />
<x-textarea appearance="ghost" color="warning" rows="2" placeholder="warning" />
<x-textarea appearance="ghost" color="error" rows="2" placeholder="error" />

<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-base-200/60 focus-within:bg-base-200">
<textarea id="textarea_6a7e9b51ac143" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="neutral"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-primary/5 focus-within:bg-primary/10">
<textarea id="textarea_6a7e9b51ac199" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="primary"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-info/5 focus-within:bg-info/10">
<textarea id="textarea_6a7e9b51ac1e3" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="info"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-success/5 focus-within:bg-success/10">
<textarea id="textarea_6a7e9b51ac228" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="success"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-warning/5 focus-within:bg-warning/10">
<textarea id="textarea_6a7e9b51ac26b" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="warning"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-transparent hover:bg-error/5 focus-within:bg-error/10">
<textarea id="textarea_6a7e9b51ac2ad" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="error"></textarea>
</div>
</div>

<x-textarea size="sm" rows="2" placeholder="size sm" />
<x-textarea size="md" rows="2" placeholder="size md (default)" />
<x-textarea size="lg" rows="2" placeholder="size lg" />

<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51b4fcd" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-sm resize-y" placeholder="size sm"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51b501b" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="size md (default)"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51b505e" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-lg resize-y" placeholder="size lg"></textarea>
</div>
</div>

<x-textarea rows="2" placeholder="rows=2" />
<x-textarea rows="4" placeholder="rows=4" />
<x-textarea rows="6" placeholder="rows=6" />

<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51b9c06" rows="2" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="rows=2"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51b9c56" rows="4" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="rows=4"></textarea>
</div>
</div>
<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51b9c9d" rows="6" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="rows=6"></textarea>
</div>
</div>

<x-textarea label="Inquiry" name="message" placeholder="Please describe your request" hint="Around 500 characters is a good guide" />
<x-textarea label="Bio" name="bio" required corner-hint="required" placeholder="Tell us about yourself" />
<x-textarea label="Feedback" name="feedback" placeholder="Enter your feedback" error="At least 10 characters required" />
<x-textarea label="Memo" rows="4" corner-hint="optional" placeholder="You can edit this later" hint="Line breaks are fine" />

<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="message_6a7e9b51be819" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Inquiry</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="message_6a7e9b51be819" rows="3" name="message" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="Please describe your request"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<p class="text-[length:var(--text-field-sm)] text-base-content/50">
            Around 500 characters is a good guide
        </p>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="bio_6a7e9b51be869" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Bio <span class="text-error ml-0.5">*</span></label>
<span class="text-[length:var(--text-field-xs)] text-base-content/50">required</span>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="bio_6a7e9b51be869" rows="3" name="bio" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="Tell us about yourself" required=""></textarea>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="feedback_6a7e9b51be8b5" class="block text-[length:var(--text-field-sm)] font-medium text-error">Feedback</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-error focus-within:ring-1 focus-within:ring-error">
<textarea id="feedback_6a7e9b51be8b5" rows="3" name="feedback" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="Enter your feedback"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<p class="text-[length:var(--text-field-sm)] text-error">
            At least 10 characters required
        </p>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51be8fe" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Memo</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/50">optional</span>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51be8fe" rows="4" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="You can edit this later"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<p class="text-[length:var(--text-field-sm)] text-base-content/50">
            Line breaks are fine
        </p>
</div>
</div>

<x-textarea autoresize rows="2" label="autoresize" placeholder="Grows automatically as you add new lines" hint="rows=2 is the minimum height" />
<x-textarea autoresize rows="3" appearance="soft" label="autoresize + soft" placeholder="Paste a long text to see it expand" />

<div class="w-full" x-data="{ count: 0, init() { this.$nextTick(() =&gt; this.resize()); }, onInput(e) { this.resize(); }, resize() { const ta = this.$refs.ta; ta.style.height = 'auto'; ta.style.height = ta.scrollHeight + 'px'; }, }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51cab3a" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">autoresize</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51cab3a" rows="2" x-ref="ta" @input="onInput($event)" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-none overflow-hidden" placeholder="Grows automatically as you add new lines"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<p class="text-[length:var(--text-field-sm)] text-base-content/50">
            rows=2 is the minimum height
        </p>
</div>
</div>
<div class="w-full" x-data="{ count: 0, init() { this.$nextTick(() =&gt; this.resize()); }, onInput(e) { this.resize(); }, resize() { const ta = this.$refs.ta; ta.style.height = 'auto'; ta.style.height = ta.scrollHeight + 'px'; }, }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51cab8e" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">autoresize + soft</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-200 tune-border border-transparent focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51cab8e" rows="3" x-ref="ta" @input="onInput($event)" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-none overflow-hidden" placeholder="Paste a long text to see it expand"></textarea>
</div>
</div>

<x-textarea label="Free count" counter rows="3" placeholder="The count grows as you type" />
<x-textarea label="With limit" maxlength="200" rows="3" placeholder="Up to 200 characters" hint="Remaining count shown bottom-right" />
<x-textarea label="Limit + corner hint" maxlength="100" corner-hint="max 100 characters" rows="3" placeholder="A title, for example" />
<x-textarea label="autoresize + counter" autoresize maxlength="500" rows="2" placeholder="Grows and counts at the same time" />

<div class="w-full" x-data="{ count: 0, init() { }, onInput(e) { this.count = e.target.value.length; }, }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51d17f9" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Free count</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51d17f9" rows="3" x-ref="ta" @input="onInput($event)" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="The count grows as you type"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<span class="ml-auto shrink-0 text-[length:var(--text-field-xs)] text-base-content/50"><span x-text="count">0</span></span>
</div>
</div>
<div class="w-full" x-data="{ count: 0, init() { }, onInput(e) { this.count = e.target.value.length; }, }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51d184d" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">With limit</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51d184d" rows="3" maxlength="200" x-ref="ta" @input="onInput($event)" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="Up to 200 characters"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<p class="text-[length:var(--text-field-sm)] text-base-content/50">
            Remaining count shown bottom-right
        </p><span class="ml-auto shrink-0 text-[length:var(--text-field-xs)] text-base-content/50"><span x-text="count">0</span> / 200</span>
</div>
</div>
<div class="w-full" x-data="{ count: 0, init() { }, onInput(e) { this.count = e.target.value.length; }, }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51d1898" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Limit + corner hint</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/50">max 100 characters</span>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51d1898" rows="3" maxlength="100" x-ref="ta" @input="onInput($event)" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="A title, for example"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<span class="ml-auto shrink-0 text-[length:var(--text-field-xs)] text-base-content/50"><span x-text="count">0</span> / 100</span>
</div>
</div>
<div class="w-full" x-data="{ count: 0, init() { this.$nextTick(() =&gt; this.resize()); }, onInput(e) { this.count = e.target.value.length; this.resize(); }, resize() { const ta = this.$refs.ta; ta.style.height = 'auto'; ta.style.height = ta.scrollHeight + 'px'; }, }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51d18e1" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">autoresize + counter</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51d18e1" rows="2" maxlength="500" x-ref="ta" @input="onInput($event)" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-none overflow-hidden" placeholder="Grows and counts at the same time"></textarea>
</div>
<div class="mt-1.5 flex items-baseline gap-3">
<span class="ml-auto shrink-0 text-[length:var(--text-field-xs)] text-base-content/50"><span x-text="count">0</span> / 500</span>
</div>
</div>

<x-textarea label="Disabled" disabled rows="3" placeholder="Cannot be edited" />
<x-textarea label="Readonly" readonly rows="3">Read-only content.</x-textarea>

<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51e1257" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Disabled</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary opacity-60 cursor-not-allowed">
<textarea id="textarea_6a7e9b51e1257" rows="3" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" placeholder="Cannot be edited" disabled></textarea>
</div>
</div>
<div class="w-full">
<div class="flex items-baseline justify-between mb-1.5">
<label for="textarea_6a7e9b51e12a7" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Readonly</label>
</div>
<div class="block transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary">
<textarea id="textarea_6a7e9b51e12a7" rows="3" class="block w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 tune-textarea-md resize-y" readonly>Read-only content.</textarea>
</div>
</div>