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_6a7e9b659ade9" 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_6a7e9b659ae44" 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_6a7e9b659ae8c" 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_6a7e9b659aed2" 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_6a7e9b659af18" 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_6a7e9b659af5c" 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_6a7e9b65a4b1f" 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_6a7e9b65a4b7d" 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_6a7e9b65a4bc7" 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_6a7e9b65a4c09" 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_6a7e9b65a4c47" 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_6a7e9b65a4c83" 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_6a7e9b65ad9e4" 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_6a7e9b65ada3b" 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_6a7e9b65ada84" 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_6a7e9b65adac9" 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_6a7e9b65adb0e" 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_6a7e9b65adb51" 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_6a7e9b65b643f" 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_6a7e9b65b649f" 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_6a7e9b65b64f0" 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_6a7e9b65b6537" 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_6a7e9b65b657e" 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_6a7e9b65b65fe" 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_6a7e9b65bf053" 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_6a7e9b65bf0aa" 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_6a7e9b65bf0f6" 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_6a7e9b65c39be" 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_6a7e9b65c3a12" 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_6a7e9b65c3a53" 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_6a7e9b65c82b2" 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_6a7e9b65c82b2" 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_6a7e9b65c8303" 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_6a7e9b65c8303" 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_6a7e9b65c834b" 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_6a7e9b65c834b" 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_6a7e9b65c8393" 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_6a7e9b65c8393" 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_6a7e9b65d44be" 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_6a7e9b65d44be" 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_6a7e9b65d450c" 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_6a7e9b65d450c" 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_6a7e9b65dac3c" 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_6a7e9b65dac3c" 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_6a7e9b65dac8a" 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_6a7e9b65dac8a" 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_6a7e9b65dacd3" 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_6a7e9b65dacd3" 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_6a7e9b65dad19" 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_6a7e9b65dad19" 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_6a7e9b65ea4b7" 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_6a7e9b65ea4b7" 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_6a7e9b65ea50a" 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_6a7e9b65ea50a" 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>