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

601

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

Float Input

Author:
Maxim

1 year ago

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

Author:
Conan Hilton

2 years ago

10.6k
Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Author:
Nick Girga

4 months ago

252
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

1 year ago

2.1k
Toggle button

Author:
Matthew Chen

2 years ago

12.5k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.7k
Range Slider

Author:
Alok

3 years ago

13.8k
File upload input box

Author:
Mohit Prajapati

2 years ago

14.4k
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Author:
Nick Girga

4 months ago

260
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

6 months ago

588
File upload

Author:
Laurits

2 years ago

12.4k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components