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_6a7e9b7e61db4" 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_6a7e9b7e61e0e" 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_6a7e9b7e61e5b" 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_6a7e9b7e61ea5" 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_6a7e9b7e61eeb" 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_6a7e9b7e61f2f" 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_6a7e9b7e6a8eb" 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_6a7e9b7e6a93b" 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_6a7e9b7e6a983" 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_6a7e9b7e6a9c8" 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_6a7e9b7e6aa0b" 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_6a7e9b7e6aa4e" 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_6a7e9b7e734f9" 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_6a7e9b7e7354d" 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_6a7e9b7e73597" 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_6a7e9b7e735dd" 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_6a7e9b7e73620" 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_6a7e9b7e73663" 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_6a7e9b7e7c3e7" 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_6a7e9b7e7c439" 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_6a7e9b7e7c483" 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_6a7e9b7e7c4cb" 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_6a7e9b7e7c510" 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_6a7e9b7e7c554" 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_6a7e9b7e85397" 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_6a7e9b7e853f4" 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_6a7e9b7e85445" 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_6a7e9b7e8a152" 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_6a7e9b7e8a1a8" 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_6a7e9b7e8a1f3" 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_6a7e9b7e8ec77" 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_6a7e9b7e8ec77" 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_6a7e9b7e8ecd0" 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_6a7e9b7e8ecd0" 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_6a7e9b7e8ed20" 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_6a7e9b7e8ed20" 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_6a7e9b7e8ed68" 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_6a7e9b7e8ed68" 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_6a7e9b7e9b1a5" 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_6a7e9b7e9b1a5" 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_6a7e9b7e9b1fc" 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_6a7e9b7e9b1fc" 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_6a7e9b7ea1b0a" 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_6a7e9b7ea1b0a" 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_6a7e9b7ea1b5b" 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_6a7e9b7ea1b5b" 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_6a7e9b7ea1ba7" 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_6a7e9b7ea1ba7" 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_6a7e9b7ea1bef" 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_6a7e9b7ea1bef" 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_6a7e9b7eb18ce" 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_6a7e9b7eb18ce" 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_6a7e9b7eb192b" 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_6a7e9b7eb192b" 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>