Text Input

Text Input components in WeedorUI are essential for capturing user input within your application. They are versatile and can be used for various purposes, such as forms, search bars, and data entry fields. Each Text Input is customizable in terms of layout, style, and behavior, ensuring seamless integration into your design

text Input

Preview

HTML

<input
  type="text"
  class="bg-transparent border border-slate-300 focus:border-slate-600 focus:border-2 rounded-md outline-none px-4 py-2 w-72"
  placeholder="Type here"
/>

JSX

<input
  type="text"
  className="bg-transparent border border-slate-300 focus:border-slate-600 focus:border-2 rounded-md outline-none px-4 py-2 w-72"
  placeholder="Type here"
/>

text Input with Label

Preview

What is your name?

HTML

<label for="name" class="text-base pb-2 block">
  What is your name?
  <input
    type="text"
    class="bg-transparent border border-slate-300 focus:border-slate-500 focus:border-2 rounded-md outline-none px-4 py-2 w-72"
    placeholder="Type here"
  />
</label>

JSX

<label for="name" className="text-base pb-2 block">
  What is your name?
  <input
    type="text"
    className="bg-transparent border border-slate-300 focus:border-slate-500 focus:border-2 rounded-md outline-none px-4 py-2 w-72"
    placeholder="Type here"
  />
</label>

text Input with Icons

Preview

HTML

{/* Email  */}
  <div class="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden" >
    <input type="email" class="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Email Address"/>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-12 px-3 cursor-pointer bg-blue-100 h-full inline-block dark:text-black" >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
    </svg>
  </div>

  {/*Search  */}
  <div class="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden">
    <input type="search" class="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Search..."/>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-12 px-3 cursor-pointer bg-green-100 h-full inline-block dark:text-black">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
    </svg>
  </div>

 {/* User  */}
  <div class="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-12 px-3 hover:cursor-pointer bg-slate-100 h-full inline-block dark:text-black" >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
    </svg>
    <input type="text" class="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Username"/>
  </div>

 {/* Password  */}
  <div class="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-12 px-3 hover:cursor-pointer bg-yellow-100 h-full inline-block dark:text-black">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
    </svg>
    <input type="Password" class="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Password"/>
  </div>

JSX

{/* Email  */}
  <div className="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden" >
    <input type="email" className="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Email Address"/>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      className="size-12 px-3 cursor-pointer bg-blue-100 h-full inline-block dark:text-black" >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
    </svg>
  </div>

  {/*Search  */}
  <div className="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden">
    <input type="search" className="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Search..."/>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      className="size-12 px-3 cursor-pointer bg-green-100 h-full inline-block dark:text-black">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
    </svg>
  </div>

 {/* User  */}
  <div className="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      className="size-12 px-3 hover:cursor-pointer bg-slate-100 h-full inline-block dark:text-black" >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
    </svg>
    <input type="text" className="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Username"/>
  </div>

 {/* Password  */}
  <div className="w-80 h-12 border border-slate-300 rounded-xl flex justify-between overflow-hidden">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      className="size-12 px-3 hover:cursor-pointer bg-yellow-100 h-full inline-block dark:text-black">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
    </svg>
    <input type="Password" className="bg-transparent outline-none px-4 py-2 flex-1 h-full" placeholder="Password"/>
  </div>

text Input with Colors

Preview

HTML

<!-- Blue -->
  <input
    type="text"
    class="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-blue-500 focus:ring-2 ring-blue-500 rounded-xl"
    placeholder="Type here"/>

<!-- Yellow -->
  <input
    type="text"
    class="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-yellow-500 focus:ring-2 ring-yellow-500 rounded-xl"
    placeholder="Type here"/>

<!-- Green -->
  <input
    type="text"
    class="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-green-500 focus:ring-2 ring-green-500 rounded-xl"
    placeholder="Type here"/>

<!-- Pink -->
  <input
    type="text"
    class="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-pink-500 focus:ring-2 ring-pink-500 rounded-xl"
    placeholder="Type here"/>

<!-- Red -->
  <input
    type="text"
    class="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-red-500 focus:ring-2 ring-red-500 rounded-xl"
    placeholder="Type here"/>

<!-- Purple -->
  <input
    type="text"
    class="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-purple-500 focus:ring-2 ring-purple-500 rounded-xl"
    placeholder="Type here"/>

JSX

<!-- Blue -->
 <input
   type="text"
   className="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-blue-500 focus:ring-2 ring-blue-500 rounded-xl"
   placeholder="Type here"/>

<!-- Yellow -->
 <input
   type="text"
   className="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-yellow-500 focus:ring-2 ring-yellow-500 rounded-xl"
   placeholder="Type here"/>

<!-- Green -->
 <input
   type="text"
   className="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-green-500 focus:ring-2 ring-green-500 rounded-xl"
   placeholder="Type here"/>

<!-- Pink -->
 <input
   type="text"
   className="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-pink-500 focus:ring-2 ring-pink-500 rounded-xl"
   placeholder="Type here"/>

<!-- Red -->
 <input
   type="text"
   className="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-red-500 focus:ring-2 ring-red-500 rounded-xl"
   placeholder="Type here"/>

<!-- Purple -->
 <input
   type="text"
   className="bg-transparent outline-none px-4 py-2 flex-1 w-80 h-12 border border-purple-500 focus:ring-2 ring-purple-500 rounded-xl"
   placeholder="Type here"/>

text Input with different sizes

Preview

HTML

        <!-- sm -->
        <input
            type="text"
            placeholder="Type here"
            class="w-80 h-8 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md"/>

        <!-- md -->
        <input
            type="text"
            placeholder="Type here"
            class="w-80 h-12 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md"/>

        <!-- lg -->
        <input
            type="text"
            placeholder="Type here"
            class="w-80 h-16 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md" />

JSX

        <!-- sm -->
        <input
            type="text"
            placeholder="Type here"
            className="w-80 h-8 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md"/>

        <!-- md -->
        <input
            type="text"
            placeholder="Type here"
            className="w-80 h-12 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md" />

        <!-- lg -->
        <input
            type="text"
            placeholder="Type here"
            className="w-80 h-16 border border-slate-300 focus:ring-2 focus:ring-slate-600 outline-none px-4 rounded-md"/>