Textarea

Textarea components in WeedorUI are designed to capture larger blocks of user input, making them ideal for comments, feedback, or longer text entries. They offer ample space for users to input detailed information and are highly customizable in terms of size, style, and behavior.

textarea

Preview

HTML

<textarea
  name=""
  id=""
  placeholder="Type here"
  class="w-80 h-20 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md "
></textarea>

JSX

<textarea
  name=""
  id=""
  placeholder="Type here"
  className="w-80 h-20 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md "
></textarea>

textarea with label

Preview

Comment

HTML

<label for="">
  <span class="block pb-1">Comment</span>
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    class="w-80 h-20 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md "
  ></textarea>
</label>

JSX

<label for="">
  <span className="block pb-1">Comment</span>
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-20 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md "
  ></textarea>
</label>

textarea with Colors

Preview

HTML

{/* Blue */}
<textarea
  name=""
  id=""
  placeholder="Type Comment here"
  class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
></textarea>

{/* Yellow */}
<textarea
  name=""
  id=""
  placeholder="Type Comment here"
  class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
></textarea>

{/* Green */}
<textarea
  name=""
  id=""
  placeholder="Type Comment here"
  class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
></textarea>

{/* Red */}
<textarea
  name=""
  id=""
  placeholder="Type Comment here"
  class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
></textarea>

{/* Pink */}
<textarea
  name=""
  id=""
  placeholder="Type Comment here"
  class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
></textarea>

{/* Purple */}
<textarea
  name=""
  id=""
  placeholder="Type Comment here"
  class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
></textarea>

JSX

  {{!-- Blue --}}
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
  ></textarea>

  {{!-- Yellow --}}
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
  ></textarea>

  {{!-- Green --}}
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
  ></textarea>

  {{!-- Red --}}
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
  ></textarea>

  {{!-- Pink --}}
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
  ></textarea>

  {{!-- Purple --}}
  <textarea
    name=""
    id=""
    placeholder="Type Comment here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md"
  ></textarea>

textarea with different sizes

Preview

HTML

  {{!-- sm --}}
  <textarea
    name=""
    id=""
    placeholder="Type here"
    class="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md ">
  </textarea>

  {{!-- md --}}
  <textarea
    name=""
    id=""
    placeholder="Type here"
    class="w-80 h-20 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md" >
  </textarea>

  {{!-- lg --}}
  <textarea
    name=""
    id=""
    placeholder="Type here"
    class="w-80 h-24 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md">
  </textarea>

JSX

{{!-- sm --}}
  <textarea
    name=""
    id=""
    placeholder="Type here"
    className="w-80 h-14 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md ">
  </textarea>

  {{!-- md --}}
  <textarea
    name=""
    id=""
    placeholder="Type here"
    className="w-80 h-20 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md" >
  </textarea>

  {{!-- lg --}}
  <textarea
    name=""
    id=""
    placeholder="Type here"
    className="w-80 h-24 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 py-2 rounded-md">
  </textarea>