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

606

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

Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

5 months ago

400
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

3.1k
Simple range slider

Author:
Nour Haider

2 years ago

15.4k
File Upload

Author:
Rajesh Maheshwari

7 months ago

925
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 days ago

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

Author:
Ameth Galarcio

1 year ago

2.3k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.9k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

14.8k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.4k
Float Input

Author:
Maxim

1 year ago

4k
Login form

Author:
Gopi Yadav

3 years ago

10.9k
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

27.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components