Home
Nick Girga
Material 3 Text Fields [Light]

Material 3 Text Fields [Light]

Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

This tailwind example is contributed by Nick Girga, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Nick Girga

801

Fork Fullscreen

<div class="flex flex-col w-full items-center gap-2 my-8">
        
        
        <h1 class="text-xl">Text Field</h1>
        <div class="text-field-container">
            <input id="text-field-0"
                class="text-field peer"
                type="text"
                placeholder="Label Text"
                oninput="document.getElementById('text-field-0-clear').classList.toggle('hidden', !document.getElementById('text-field-0').value)" />
            <label for="text-field-0" class="text-field-label">Label Text</label>
            <label for="text-field-0" class="text-field-supporting-text">Supporting Text</label>
        </div>

<h1 class="text-xl mt-8">Outlined Text Field</h1>
        <div class="text-field-container">
            <input id="text-field-1"
                class="text-field text-field-outlined peer"
                type="text"
                placeholder="Label Text"
                oninput="document.getElementById('text-field-1-clear').classList.toggle('hidden', !document.getElementById('text-field-1').value)" />
            <label for="text-field-1" class="text-field-label text-field-label-outlined">Label Text</label>
            <label for="text-field-1" class="text-field-supporting-text">Supporting Text</label>
        </div>

<h1 class="text-xl mt-8">Text Field w/ Icons</h1>
        <div class="text-field-container">
            <input id="text-field-2"
                class="text-field peer px-12"
                type="text"
                placeholder="Label Text"
                oninput="document.getElementById('text-field-2-clear').classList.toggle('hidden', !document.getElementById('text-field-2').value)" />
            <div class="text-field-icon text-field-icon-lead pointer-events-none">
                <span class="material-symbols-outlined">search</span>
            </div>
             <button id="text-field-2-clear"
                class="text-field-icon text-field-icon-trailing cursor-pointer hidden"
                onclick="document.getElementById('text-field-2').value = '';document.getElementById('text-field-2-clear').classList.add('hidden')">
                <span class="material-symbols-outlined">cancel</span>
            </button>
            <label for="text-field-2" class="text-field-label text-field-label-with-icon">Label Text</label>
            <label for="text-field-2" class="text-field-supporting-text">Supporting Text</label>
        </div>

<h1 class="text-xl mt-8">Outlined Text Field w/ Icons</h1>
        <div class="text-field-container">
            <input id="text-field-3"
                class="text-field text-field-outlined peer px-12"
                type="text"
                placeholder="Label Text"
                oninput="document.getElementById('text-field-3-clear').classList.toggle('hidden', !document.getElementById('text-field-3').value)" />
            <div class="text-field-icon text-field-icon-lead pointer-events-none">
                <span class="material-symbols-outlined">search</span>
            </div>
             <button id="text-field-3-clear"
                class="text-field-icon text-field-icon-trailing cursor-pointer hidden"
                onclick="document.getElementById('text-field-3').value = '';document.getElementById('text-field-3-clear').classList.add('hidden')">
                <span class="material-symbols-outlined">cancel</span>
            </button>
            <label for="text-field-3" class="text-field-label text-field-label-with-icon-outlined text-field-label-outlined">Label Text</label>
            <label for="text-field-3" class="text-field-supporting-text">Supporting Text</label>
        </div>

</div>

<div class="flex flex-col w-full items-center gap-2 my-8">
        
        <h1 class="text-xl">Textarea</h1>
        <div class="text-field-container">
          <textarea id="textarea-0" rows="4" class="text-field peer" placeholder="Label Text"></textarea>
          <label for="textarea-0" class="text-field-label">Label Text</label>
          <label for="textarea-0" class="text-field-supporting-text">Supporting Text</label>
        </div>

<h1 class="text-xl mt-8">Outlined Textarea</h1>
        <div class="text-field-container">
          <textarea id="textarea-1" rows="4" class="text-field text-field-outlined peer" placeholder="Label Text"></textarea>
          <label for="textarea-1" class="text-field-label text-field-label-outlined">Label Text</label>
          <label for="textarea-1" class="text-field-supporting-text">Supporting Text</label>
        </div>
      </div>

</body>

Related Examples

Input field with logo
Logo on the left side of the input field

Author:
Conan Hilton

3 years ago

10.9k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

11 months ago

1.7k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Comment section

Author:
Manuela Bianka

3 years ago

11.7k
test1 اصلي

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.8k
Textarea input
Fancy Textarea

Author:
Piet Vriend

3 years ago

11.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

18.3k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.9k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

1 year ago

2.9k
Console like input field

Author:
Charlotte Dupont

3 years ago

11.9k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

1 year ago

2.7k
Login Form with Icon

Author:
Akai

3 months ago

160

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components