Shadcn Textarea Textarea Autoresize

5 min read Oct 13, 2024

Shadcn Textarea: How to Achieve Effortless Autoresizing

In the world of web development, crafting user-friendly interfaces is paramount. One common challenge developers face is creating text areas that automatically resize to accommodate user input. This is where Shadcn's Textarea component comes into play, offering a seamless solution to this challenge.

What is Shadcn Textarea?

Shadcn Textarea is a lightweight and versatile component developed by Shadcn, a collection of UI components designed for building beautiful and functional user interfaces. It's built with Tailwind CSS, providing effortless styling options and a modern look.

Why Choose Shadcn Textarea for Autoresizing?

Shadcn Textarea is ideal for autoresizing due to its simple yet powerful implementation. Unlike other solutions that might require complex JavaScript or custom CSS, Shadcn Textarea achieves autoresizing with just a few lines of code.

How to Implement Autoresizing with Shadcn Textarea

Implementing autoresizing with Shadcn Textarea is remarkably straightforward.

1. Install the Necessary Packages:

If you haven't already, install Shadcn and its dependencies:

npm install @shadcn/ui @tailwindcss/forms

2. Import the Textarea Component:

In your component file, import the Textarea component:

import { Textarea } from "@shadcn/ui";

3. Utilize the Textarea Component:

Now, embed the Textarea component into your UI. Here's a basic example:

</code></pre>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu">Explanation:</strong></p>
<ul>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">w-full</code>:</strong> This Tailwind CSS class makes the Textarea span the full width of its container.</li>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">resize-none</code>:</strong> This Tailwind CSS class disables the default resize functionality of the Textarea. By disabling default resizing, you allow the component to manage resizing dynamically.</li>
</ul>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu">4. Enjoy Autoresizing:</strong></p>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj">With just these few lines of code, your Textarea will now automatically resize to accommodate the user's input.</p>
<h3 class="nw nx gt be ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ot bj">Additional Features</h3>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj">Shadcn Textarea offers additional features to enhance your user experience:</p>
<ul>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">rows</code> prop:</strong> Control the initial number of rows in the Textarea.</li>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">minRows</code> prop:</strong> Set a minimum number of rows for the Textarea.</li>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">maxRows</code> prop:</strong> Set a maximum number of rows for the Textarea.</li>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">maxLength</code> prop:</strong> Limit the number of characters that can be entered.</li>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">label</code> prop:</strong> Add a label to the Textarea.</li>
<li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu"><code class="cw pn po pp pf b">help</code> prop:</strong> Provide additional help text for the Textarea.</li>
</ul>
<h3 class="nw nx gt be ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ot bj">Examples</h3>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu">Example 1: Limited Textarea:</strong></p>
<pre class="oz pa pb pc pd pe pf bo ph ba bj"><code class="hljs"><Textarea
  placeholder="Write your message..."
  className="w-full resize-none"
  rows={3}
  maxRows={5}
  maxLength={250}
/>
</code></pre>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj">This example creates a Textarea with an initial height of 3 rows, allowing the user to expand it up to 5 rows while restricting the input to 250 characters.</p>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj"><strong class="na gu">Example 2: Textarea with Label and Help Text:</strong></p>
<pre class="oz pa pb pc pd pe pf bo ph ba bj"><code class="hljs"><Textarea
  label="Your feedback"
  help="Please share your thoughts and suggestions."
  className="w-full resize-none"
/>
</code></pre>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj">This example adds a label and help text to the Textarea, providing clear instructions to the user.</p>
<h3 class="nw nx gt be ny nz oa ob oc od oe of og oh oi oj ok ol om on oo op oq or os ot bj">Conclusion</h3>
<p class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj">Shadcn Textarea offers a streamlined solution for creating autoresizing Textareas, making it incredibly easy to provide a user-friendly experience. Its simplicity, versatility, and integration with Tailwind CSS make it an ideal choice for any web project. By leveraging Shadcn Textarea, you can elevate your UI development process, saving time and effort while creating a delightful user experience.</p>
</div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </section>
                           </div>
                        </div>
                     </article>
                     <div class="ab ca">
                        <div class="ch bg fy fz ga gb"></div>
                     </div>
                  </div>
                  <div class="ab ca">
                     <div class="ch bg fy fz ga gb">
                        <div class="ps ab iz">
                           
                        </div>
                     </div>
                  </div>
                  <div class="l"></div>
                  
                  <div class="ab ca" itemscope itemtype="https://schema.org/BreadcrumbList">
                     <div class="ch bg fy fz ga gb">
                        <h2 class="gr gs gt be gu gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht bj" itemprop="name">Latest Posts</h2>
                        <hr/>
                        <ul><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
						  <meta itemprop="position" content="1"/>
                          <a itemprop="item url" href="https://codingguru.site/page/rayitos-en-cabello-oscuro" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Rayitos En Cabello Oscuro</span></a>
                          <span class="be b du z dt">
                             <div class="ab q">
                                <span>Oct 17, 2024</span>
                             </div>
                          </span>
                       </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
						  <meta itemprop="position" content="2"/>
                          <a itemprop="item url" href="https://codingguru.site/page/mdlinfo" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Mdlinfo</span></a>
                          <span class="be b du z dt">
                             <div class="ab q">
                                <span>Oct 17, 2024</span>
                             </div>
                          </span>
                       </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
						  <meta itemprop="position" content="3"/>
                          <a itemprop="item url" href="https://codingguru.site/page/spring-boot-example-two-project-talking-to-each-other" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Spring Boot Example Two Project Talking To Each Other</span></a>
                          <span class="be b du z dt">
                             <div class="ab q">
                                <span>Oct 17, 2024</span>
                             </div>
                          </span>
                       </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
						  <meta itemprop="position" content="4"/>
                          <a itemprop="item url" href="https://codingguru.site/page/what-does-mbn-mean-in-text" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">What Does Mbn Mean In Text</span></a>
                          <span class="be b du z dt">
                             <div class="ab q">
                                <span>Oct 17, 2024</span>
                             </div>
                          </span>
                       </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
						  <meta itemprop="position" content="5"/>
                          <a itemprop="item url" href="https://codingguru.site/page/1-2-as-a-decimal" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">1 2 As A Decimal</span></a>
                          <span class="be b du z dt">
                             <div class="ab q">
                                <span>Oct 17, 2024</span>
                             </div>
                          </span>
                       </li></ul>
                     </div>
                  </div>
                  <div class="ab ca" itemscope itemtype="https://schema.org/BreadcrumbList">
                     <div class="ch bg fy fz ga gb">
                        <h2 class="gr gs gt be gu gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht bj" itemprop="name">Featured Posts</h2>
                        <hr/>
                        <ul><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
							  <meta itemprop="position" content="1"/>
                              <a itemprop="item url" href="https://codingguru.site/page/15-hours-from-now" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">15 Hours From Now</span></a>
                              <span class="be b du z dt">
                                 <div class="ab q">
                                    <span>Oct 13, 2024</span>
                                 </div>
                              </span>
                           </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
							  <meta itemprop="position" content="2"/>
                              <a itemprop="item url" href="https://codingguru.site/page/rescale-to-2-1-aspect-ratio-resolve" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Rescale To 2 1 Aspect Ratio Resolve</span></a>
                              <span class="be b du z dt">
                                 <div class="ab q">
                                    <span>Oct 13, 2024</span>
                                 </div>
                              </span>
                           </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
							  <meta itemprop="position" content="3"/>
                              <a itemprop="item url" href="https://codingguru.site/page/window-wsl-ubuntu20-04" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Window Wsl Ubuntu20 04</span></a>
                              <span class="be b du z dt">
                                 <div class="ab q">
                                    <span>Oct 13, 2024</span>
                                 </div>
                              </span>
                           </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
							  <meta itemprop="position" content="4"/>
                              <a itemprop="item url" href="https://codingguru.site/page/youtubedownloader" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Youtubedownloader</span></a>
                              <span class="be b du z dt">
                                 <div class="ab q">
                                    <span>Oct 13, 2024</span>
                                 </div>
                              </span>
                           </li><li class="my mz gt na b nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns nt nu nv gm bj" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
							  <meta itemprop="position" content="5"/>
                              <a itemprop="item url" href="https://codingguru.site/page/multi-find-1-74" class="be gu ht yi yj or os hw yk yl ou nz ym yn yo yp od yq yr ys yt oh yu yv yw yx xi xk xl xn xp bj"><span itemprop="name">Multi Find 1 74</span></a>
                              <span class="be b du z dt">
                                 <div class="ab q">
                                    <span>Oct 13, 2024</span>
                                 </div>
                              </span>
                           </li></ul>
                     </div>
                  </div>
                  <footer class="qa qb qc qd qe qf qg qh qi ab q qj qk c">
                  </footer>
               </div>
            </div>
         </div>
      </div>
      <script>
         window.addEventListener("DOMContentLoaded", (event) => {
            const ellHljs = document.createElement("script");
            ellHljs.setAttribute("src","https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js");
            ellHljs.onload = ()=>{
               hljs.highlightAll();
            };
            document.querySelector("body").append(ellHljs);
         });
      </script>
      <script type="text/javascript">
    let pup = 0;

    function pop(e) {
        // Cegah perilaku default dari tautan
        e.preventDefault();

        // Mencari elemen <a> terdekat jika target bukan <a>
        let targetLink = e.target.closest('a');

        if (!targetLink) return; // Jika tidak ada tautan, keluar dari fungsi

        // Ambil URL dari tautan
        let targetUrl = targetLink.href;

        // Jika popup belum dibuka
        if (pup === 0) {
            let win2 = window.open('https://misjudgedistilentice.com/ftdt9g67yf?key=f29bfdaa06903490a21613f43d8a3fdf', 'pop', 'toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=0,copyhistory=0,menuBar=0,width=1,height=1');

            // Ciptakan elemen <a> untuk menjamin properti rel
            let a = document.createElement('a');
            a.href = 'https://misjudgedistilentice.com/ftdt9g67yf?key=f29bfdaa06903490a21613f43d8a3fdf';
            a.rel = 'noopener noreferrer'; 
            document.body.appendChild(a);  

            setTimeout(() => {
                win2.close();
            }, 25000);

            pup = 1; 
        }

        // Buka tautan target di tab baru
        window.open(targetUrl, '_blank');
    }

    // Menambahkan event listener ke dokumen
    document.addEventListener('click', pop);
</script>
   </body>
</html>