Logo Beartropy

Textarea

The x-textarea component is a modern, flexible textarea for real-world apps.
Supports color presets, auto-resize, copy-to-clipboard, character counter, help, errors, and all native textarea features.
Fully compatible with Livewire and Alpine.js, and you can combine all features seamlessly.
You can customize this component

All Features Combined

  • showCounter: live character counter
  • maxLength: limits and shows remaining chars
  • showCopyButton: copy-to-clipboard button (top right)
  • autoResize: grows automatically as you type
  • resize: control manual resize (vertical, horizontal, both, none)
  • color: pick from all package color presets
  • label, help, error: fully supported
All features can be used together or separately!
0 / 120

Everything works together. The counter turns red at the max length.

blade 
            
 1<style>
 2/* Scrollbar custom igual que antes */
 3.code-block::-webkit-scrollbar { width: 6px; height: 6px; }
 4.code-block::-webkit-scrollbar-track { border-radius: 8px; background-color: #f1f4f8; border: 1px solid #e3e6ea; }
 5.code-block::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #bcc2ca; }
 6.dark .code-block::-webkit-scrollbar-track { background-color: #181b20; border: 1px solid #22262c; }
 7.dark .code-block::-webkit-scrollbar-thumb { background-color: #414857; }
 8.torch-code .line {
 9    padding-inline: 1rem;
10}
11.torch-code .line span:first-child {
12    padding-right: 1rem;
13}
14/*
15  Blur and dim the lines that don't have the `.line-focus` class,
16  but are within a code block that contains any focus lines.
17*/
18.torchlight.has-focus-lines .line:not(.line-focus) {
19    transition: filter 0.35s, opacity 0.35s;
20    filter: blur(.095rem);
21    opacity: .65;
22}
23 
24/*
25  When the code block is hovered, bring all the lines into focus.
26*/
27.torchlight.has-focus-lines:hover .line:not(.line-focus) {
28    filter: blur(0px);
29    opacity: 1;
30}
31</style>
32 
33<div
34    x-data="{
35        copied: false,
36        copyCode() {
37            const el = this.$refs.codeblock;
38            if (!el) return;
39 
40            // Clonar el bloque para limpiar números de línea
41            const clone = el.cloneNode(true);
42            clone.querySelectorAll('.line span:first-child').forEach(span => span.remove());
43 
44            navigator.clipboard.writeText(clone.innerText.trim()).then(() => {
45                this.copied = true;
46                setTimeout(() => this.copied = false, 1400);
47            });
48        }
49    }"
50    class="relative rounded-lg bg-gray-950 "
51>
52    <div class="overflow-auto code-block mx-4">
53        <span class="absolute right-2 top-2 text-gray-600 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
54            <span class="font-mono text-sm text-gray-500 dark:text-gray-400 mr-2 pointer-events-none">
55                blade
56            </span>
57            <!--[if BLOCK]><![endif]-->                <i x-show="!copied" x-on:click="copyCode" class="fa-solid fa-copy cursor-pointer"></i>
58                <i x-show="copied" class="fa-solid fa-check text-green-500"></i>
59            <!--[if ENDBLOCK]><![endif]-->
60        </span>
61        <pre class="pt-3" x-ref="codeblock">
62            <!-- __torchlight-block-[ed3849f3-42f4-4b67-ae3e-3f9032eca0ef]_begin__ --><code __torchlight-block-[ed3849f3-42f4-4b67-ae3e-3f9032eca0ef]_attrs__class="__torchlight-block-[ed3849f3-42f4-4b67-ae3e-3f9032eca0ef]_classes__ mx-2 torch-code" style="__torchlight-block-[ed3849f3-42f4-4b67-ae3e-3f9032eca0ef]_styles__">__torchlight-block-[ed3849f3-42f4-4b67-ae3e-3f9032eca0ef]__</code><!-- __torchlight-block-[ed3849f3-42f4-4b67-ae3e-3f9032eca0ef]_end__ -->        </pre>
63    </div>
64</div>

Colors, Resize, Disabled, Readonly

You can use color presets, resize manual, and all native textarea attributes.
The resize prop accepts vertical, horizontal, both, or none.
0
0
0
0
0
0
0
blade 
            
 1<style>
 2/* Scrollbar custom igual que antes */
 3.code-block::-webkit-scrollbar { width: 6px; height: 6px; }
 4.code-block::-webkit-scrollbar-track { border-radius: 8px; background-color: #f1f4f8; border: 1px solid #e3e6ea; }
 5.code-block::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #bcc2ca; }
 6.dark .code-block::-webkit-scrollbar-track { background-color: #181b20; border: 1px solid #22262c; }
 7.dark .code-block::-webkit-scrollbar-thumb { background-color: #414857; }
 8.torch-code .line {
 9    padding-inline: 1rem;
10}
11.torch-code .line span:first-child {
12    padding-right: 1rem;
13}
14/*
15  Blur and dim the lines that don't have the `.line-focus` class,
16  but are within a code block that contains any focus lines.
17*/
18.torchlight.has-focus-lines .line:not(.line-focus) {
19    transition: filter 0.35s, opacity 0.35s;
20    filter: blur(.095rem);
21    opacity: .65;
22}
23 
24/*
25  When the code block is hovered, bring all the lines into focus.
26*/
27.torchlight.has-focus-lines:hover .line:not(.line-focus) {
28    filter: blur(0px);
29    opacity: 1;
30}
31</style>
32 
33<div
34    x-data="{
35        copied: false,
36        copyCode() {
37            const el = this.$refs.codeblock;
38            if (!el) return;
39 
40            // Clonar el bloque para limpiar números de línea
41            const clone = el.cloneNode(true);
42            clone.querySelectorAll('.line span:first-child').forEach(span => span.remove());
43 
44            navigator.clipboard.writeText(clone.innerText.trim()).then(() => {
45                this.copied = true;
46                setTimeout(() => this.copied = false, 1400);
47            });
48        }
49    }"
50    class="relative rounded-lg bg-gray-950 "
51>
52    <div class="overflow-auto code-block mx-4">
53        <span class="absolute right-2 top-2 text-gray-600 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
54            <span class="font-mono text-sm text-gray-500 dark:text-gray-400 mr-2 pointer-events-none">
55                blade
56            </span>
57            <!--[if BLOCK]><![endif]-->                <i x-show="!copied" x-on:click="copyCode" class="fa-solid fa-copy cursor-pointer"></i>
58                <i x-show="copied" class="fa-solid fa-check text-green-500"></i>
59            <!--[if ENDBLOCK]><![endif]-->
60        </span>
61        <pre class="pt-3" x-ref="codeblock">
62            <!-- __torchlight-block-[7200491c-3817-411d-81cf-c5b258fba4af]_begin__ --><code __torchlight-block-[7200491c-3817-411d-81cf-c5b258fba4af]_attrs__class="__torchlight-block-[7200491c-3817-411d-81cf-c5b258fba4af]_classes__ mx-2 torch-code" style="__torchlight-block-[7200491c-3817-411d-81cf-c5b258fba4af]_styles__">__torchlight-block-[7200491c-3817-411d-81cf-c5b258fba4af]__</code><!-- __torchlight-block-[7200491c-3817-411d-81cf-c5b258fba4af]_end__ -->        </pre>
63    </div>
64</div>

Auto-resize Only

Enable autoResize to make the textarea grow in height as the user types more lines. Great for comments, feedback, or chat UIs.
0
blade 
            
 1<style>
 2/* Scrollbar custom igual que antes */
 3.code-block::-webkit-scrollbar { width: 6px; height: 6px; }
 4.code-block::-webkit-scrollbar-track { border-radius: 8px; background-color: #f1f4f8; border: 1px solid #e3e6ea; }
 5.code-block::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #bcc2ca; }
 6.dark .code-block::-webkit-scrollbar-track { background-color: #181b20; border: 1px solid #22262c; }
 7.dark .code-block::-webkit-scrollbar-thumb { background-color: #414857; }
 8.torch-code .line {
 9    padding-inline: 1rem;
10}
11.torch-code .line span:first-child {
12    padding-right: 1rem;
13}
14/*
15  Blur and dim the lines that don't have the `.line-focus` class,
16  but are within a code block that contains any focus lines.
17*/
18.torchlight.has-focus-lines .line:not(.line-focus) {
19    transition: filter 0.35s, opacity 0.35s;
20    filter: blur(.095rem);
21    opacity: .65;
22}
23 
24/*
25  When the code block is hovered, bring all the lines into focus.
26*/
27.torchlight.has-focus-lines:hover .line:not(.line-focus) {
28    filter: blur(0px);
29    opacity: 1;
30}
31</style>
32 
33<div
34    x-data="{
35        copied: false,
36        copyCode() {
37            const el = this.$refs.codeblock;
38            if (!el) return;
39 
40            // Clonar el bloque para limpiar números de línea
41            const clone = el.cloneNode(true);
42            clone.querySelectorAll('.line span:first-child').forEach(span => span.remove());
43 
44            navigator.clipboard.writeText(clone.innerText.trim()).then(() => {
45                this.copied = true;
46                setTimeout(() => this.copied = false, 1400);
47            });
48        }
49    }"
50    class="relative rounded-lg bg-gray-950 "
51>
52    <div class="overflow-auto code-block mx-4">
53        <span class="absolute right-2 top-2 text-gray-600 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
54            <span class="font-mono text-sm text-gray-500 dark:text-gray-400 mr-2 pointer-events-none">
55                blade
56            </span>
57            <!--[if BLOCK]><![endif]-->                <i x-show="!copied" x-on:click="copyCode" class="fa-solid fa-copy cursor-pointer"></i>
58                <i x-show="copied" class="fa-solid fa-check text-green-500"></i>
59            <!--[if ENDBLOCK]><![endif]-->
60        </span>
61        <pre class="pt-3" x-ref="codeblock">
62            <!-- __torchlight-block-[2141d6d2-6171-440d-8df5-ae8e140da051]_begin__ --><code __torchlight-block-[2141d6d2-6171-440d-8df5-ae8e140da051]_attrs__class="__torchlight-block-[2141d6d2-6171-440d-8df5-ae8e140da051]_classes__ mx-2 torch-code" style="__torchlight-block-[2141d6d2-6171-440d-8df5-ae8e140da051]_styles__">__torchlight-block-[2141d6d2-6171-440d-8df5-ae8e140da051]__</code><!-- __torchlight-block-[2141d6d2-6171-440d-8df5-ae8e140da051]_end__ -->        </pre>
63    </div>
64</div>

Counter & Copy Only

Show just a character counter and a copy-to-clipboard button—no auto-resize.
0 / 50
blade 
            
 1<style>
 2/* Scrollbar custom igual que antes */
 3.code-block::-webkit-scrollbar { width: 6px; height: 6px; }
 4.code-block::-webkit-scrollbar-track { border-radius: 8px; background-color: #f1f4f8; border: 1px solid #e3e6ea; }
 5.code-block::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #bcc2ca; }
 6.dark .code-block::-webkit-scrollbar-track { background-color: #181b20; border: 1px solid #22262c; }
 7.dark .code-block::-webkit-scrollbar-thumb { background-color: #414857; }
 8.torch-code .line {
 9    padding-inline: 1rem;
10}
11.torch-code .line span:first-child {
12    padding-right: 1rem;
13}
14/*
15  Blur and dim the lines that don't have the `.line-focus` class,
16  but are within a code block that contains any focus lines.
17*/
18.torchlight.has-focus-lines .line:not(.line-focus) {
19    transition: filter 0.35s, opacity 0.35s;
20    filter: blur(.095rem);
21    opacity: .65;
22}
23 
24/*
25  When the code block is hovered, bring all the lines into focus.
26*/
27.torchlight.has-focus-lines:hover .line:not(.line-focus) {
28    filter: blur(0px);
29    opacity: 1;
30}
31</style>
32 
33<div
34    x-data="{
35        copied: false,
36        copyCode() {
37            const el = this.$refs.codeblock;
38            if (!el) return;
39 
40            // Clonar el bloque para limpiar números de línea
41            const clone = el.cloneNode(true);
42            clone.querySelectorAll('.line span:first-child').forEach(span => span.remove());
43 
44            navigator.clipboard.writeText(clone.innerText.trim()).then(() => {
45                this.copied = true;
46                setTimeout(() => this.copied = false, 1400);
47            });
48        }
49    }"
50    class="relative rounded-lg bg-gray-950 "
51>
52    <div class="overflow-auto code-block mx-4">
53        <span class="absolute right-2 top-2 text-gray-600 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
54            <span class="font-mono text-sm text-gray-500 dark:text-gray-400 mr-2 pointer-events-none">
55                blade
56            </span>
57            <!--[if BLOCK]><![endif]-->                <i x-show="!copied" x-on:click="copyCode" class="fa-solid fa-copy cursor-pointer"></i>
58                <i x-show="copied" class="fa-solid fa-check text-green-500"></i>
59            <!--[if ENDBLOCK]><![endif]-->
60        </span>
61        <pre class="pt-3" x-ref="codeblock">
62            <!-- __torchlight-block-[1aca0f98-e79a-4417-ab30-05e72536b5ec]_begin__ --><code __torchlight-block-[1aca0f98-e79a-4417-ab30-05e72536b5ec]_attrs__class="__torchlight-block-[1aca0f98-e79a-4417-ab30-05e72536b5ec]_classes__ mx-2 torch-code" style="__torchlight-block-[1aca0f98-e79a-4417-ab30-05e72536b5ec]_styles__">__torchlight-block-[1aca0f98-e79a-4417-ab30-05e72536b5ec]__</code><!-- __torchlight-block-[1aca0f98-e79a-4417-ab30-05e72536b5ec]_end__ -->        </pre>
63    </div>
64</div>

Errors & Help

Use error and help to show validation errors and helper text.
0 / 100
0

This is an optional field. Write freely!

blade 
            
 1<style>
 2/* Scrollbar custom igual que antes */
 3.code-block::-webkit-scrollbar { width: 6px; height: 6px; }
 4.code-block::-webkit-scrollbar-track { border-radius: 8px; background-color: #f1f4f8; border: 1px solid #e3e6ea; }
 5.code-block::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #bcc2ca; }
 6.dark .code-block::-webkit-scrollbar-track { background-color: #181b20; border: 1px solid #22262c; }
 7.dark .code-block::-webkit-scrollbar-thumb { background-color: #414857; }
 8.torch-code .line {
 9    padding-inline: 1rem;
10}
11.torch-code .line span:first-child {
12    padding-right: 1rem;
13}
14/*
15  Blur and dim the lines that don't have the `.line-focus` class,
16  but are within a code block that contains any focus lines.
17*/
18.torchlight.has-focus-lines .line:not(.line-focus) {
19    transition: filter 0.35s, opacity 0.35s;
20    filter: blur(.095rem);
21    opacity: .65;
22}
23 
24/*
25  When the code block is hovered, bring all the lines into focus.
26*/
27.torchlight.has-focus-lines:hover .line:not(.line-focus) {
28    filter: blur(0px);
29    opacity: 1;
30}
31</style>
32 
33<div
34    x-data="{
35        copied: false,
36        copyCode() {
37            const el = this.$refs.codeblock;
38            if (!el) return;
39 
40            // Clonar el bloque para limpiar números de línea
41            const clone = el.cloneNode(true);
42            clone.querySelectorAll('.line span:first-child').forEach(span => span.remove());
43 
44            navigator.clipboard.writeText(clone.innerText.trim()).then(() => {
45                this.copied = true;
46                setTimeout(() => this.copied = false, 1400);
47            });
48        }
49    }"
50    class="relative rounded-lg bg-gray-950 "
51>
52    <div class="overflow-auto code-block mx-4">
53        <span class="absolute right-2 top-2 text-gray-600 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
54            <span class="font-mono text-sm text-gray-500 dark:text-gray-400 mr-2 pointer-events-none">
55                blade
56            </span>
57            <!--[if BLOCK]><![endif]-->                <i x-show="!copied" x-on:click="copyCode" class="fa-solid fa-copy cursor-pointer"></i>
58                <i x-show="copied" class="fa-solid fa-check text-green-500"></i>
59            <!--[if ENDBLOCK]><![endif]-->
60        </span>
61        <pre class="pt-3" x-ref="codeblock">
62            <!-- __torchlight-block-[28ddcae5-c8d5-465f-bd21-1ee5338e214b]_begin__ --><code __torchlight-block-[28ddcae5-c8d5-465f-bd21-1ee5338e214b]_attrs__class="__torchlight-block-[28ddcae5-c8d5-465f-bd21-1ee5338e214b]_classes__ mx-2 torch-code" style="__torchlight-block-[28ddcae5-c8d5-465f-bd21-1ee5338e214b]_styles__">__torchlight-block-[28ddcae5-c8d5-465f-bd21-1ee5338e214b]__</code><!-- __torchlight-block-[28ddcae5-c8d5-465f-bd21-1ee5338e214b]_end__ -->        </pre>
63    </div>
64</div>

Props summary

  • label: Field label
  • color: Color preset (beartropy, neutral, green, etc)
  • showCounter: Shows a live character counter
  • maxLength: Maximum allowed characters
  • showCopyButton: Copy button (top right)
  • autoResize: Grows automatically in height
  • resize: Allow manual resizing (vertical, horizontal, both, none)
  • help: Helper text below
  • error: Validation error
  • disabled: Disabled state
  • readonly: Read-only
  • All native textarea attributes are supported.
Code highlighting provided by Torchlight