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_21989194877ab" 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_fdd6a48992cc7" 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_165febf68eac6" 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_d6e763723afc4" 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_c6033394e5c9b" 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_3198c1c998f6e" 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_612147dc8796a" 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_e01ce9c18dad4" 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_341098ca2aac0" 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_ca0a8ab939d2f" 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_c66f095cfeae2" 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_5e6246e5402fd" 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="wire" color="neutral" rows="2" placeholder="neutral" />
<x-textarea appearance="wire" color="primary" rows="2" placeholder="primary" />
<x-textarea appearance="wire" color="info" rows="2" placeholder="info" />
<x-textarea appearance="wire" color="success" rows="2" placeholder="success" />
<x-textarea appearance="wire" color="warning" rows="2" placeholder="warning" />
<x-textarea appearance="wire" color="error" rows="2" placeholder="error" />

<div class="w-full">
<div class="block transition-colors rounded-[var(--radius-field)] bg-transparent tune-border border-base-content/45 focus-within:border-base-content">
<textarea id="textarea_6e3df9b7d5fcf" 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-primary focus-within:border-primary">
<textarea id="textarea_86e8157219013" 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-info focus-within:border-info">
<textarea id="textarea_1f3d5c1861f00" 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-success focus-within:border-success">
<textarea id="textarea_798138c447c13" 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-warning focus-within:border-warning">
<textarea id="textarea_caa1e2943926d" 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-error focus-within:border-error">
<textarea id="textarea_5156f83c5055b" 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_c1ea8f6336195" 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_700b42a850340" 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_666d9f2aa8be7" 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_301068d1789bf" 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_4d55c63468070" 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_f31e2277eebb9" 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_7a6c4184a47a8" 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_28cb348e67f70" 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_3f435f3558350" 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_5ca21a06ea32b" 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_d6564455b02bd" 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_9cb7728c6ee1d" 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_629778acb8c40" 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_c7a781239108e" 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_43b8496b1ec43" 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_c98574fecca6d" 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_0ac7c087a56e8" 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_685ed59d0926f" 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_a5f9a1ccb145a" 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_a5f9a1ccb145a" 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_8ecffa85d4997" 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_8ecffa85d4997" 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_a6baad80963bf" 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_a6baad80963bf" 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_91a15886de2e6" 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_91a15886de2e6" 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_8ae14cf7ba8c9" 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_8ae14cf7ba8c9" 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_ba308091385cf" 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_ba308091385cf" 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_99e6f550d745a" 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_99e6f550d745a" 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_ae4f262857f98" 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_ae4f262857f98" 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_4ba69cfd3b781" 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_4ba69cfd3b781" 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_b2a27e46708af" 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_b2a27e46708af" 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_d75a8656cb9b3" 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_d75a8656cb9b3" 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_26d97f7d0f0e9" 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_26d97f7d0f0e9" 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>