Text Field

Based on Material 3 text field specifications

    
    <div class="m3-text-field">
      <label class="m3-text-field--label">Label</label>
      <input>
    </div>

Adding label

To enable input label, add a child element label with m3-text-field--label in its class list.

      
      <div class="m3-text-field">
        <label class="m3-text-field--label">Label</label>
        <input>
      </div>

Unpopulated state

Label is anchored to the top of its container for convenience by default. To set the text field to its unpopulated state, add m3-text-field__unpopulated CSS modifier to the container class list. The transition would automatically animate.

        
        <div class="m3-text-field m3-text-field__unpopulated">
          <label class="m3-text-field--label">Label</label>
          <input>
        </div>

Leading and trailing icons

Add a child element with m3-text-field--leading or m3-text-field--trailing in its class list.

          
          <div class="m3-text-field">
            <span class="m3-text-field--leading m3-sym">icon_name</span>
            <span class="m3-text-field--trailing m3-sym">icon_name</span>
            <input>
          </div>
          
        

It works for Icon Buttons too!

          
          <div class="m3-text-field">
            <span class="m3-text-field--leading m3-sym">icon_name</span>
            <button class="m3-text-field--trailing m3-icon-button">
              <span class="m3-icon-button--icon m3-sym">icon_name</span>
            </button>
            <input>
          </div>
          
        

Last modified: 27 February 2024