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 v3.4. It is responsive.

Input

Author Nick Girga

Tailwind v3.4 1.5k 8

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

File input field

Lyra Ravensong

3 years ago

14.1k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

714
Upload file input field

Gopi Yadav

3 years ago

15.8k
beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

6.5k
Payment Form

ABDO-SY

1 year ago

2.4k
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Muhammad Imran

2 years ago

2.6k
Single Input newsletter form

Task Master

3 years ago

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

Nick Girga

1 year ago

991
Sign in / Login Form

Bunny

4 years ago

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

Ameth Galarcio

2 years ago

3.4k
pricing slider with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.2k