Text Field
Text fields are commonly used in forms. mdui text fields support features such as word count and form validation.
Form layouts can be created in conjunction with the Grid layout system.
Usage
They are automatically initialized after the page is loaded. For dynamically generated text fields, you need to call mdui.mutation() for initialization.
Color
Use the accent color.
Related Reading
<div class="mdui-textfield">
<input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div><div class="mdui-textfield">
<label class="mdui-textfield-label">User Name</label>
<input class="mdui-textfield-input" type="text"/>
</div><div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" />
</div>Disabled state
Add the disabled attribute to the .mdui-textfield-input element to disable the text field.
<div class="mdui-textfield">
<input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>
<!-- Fixed label -->
<div class="mdui-textfield">
<label class="mdui-textfield-label">User Name</label>
<input class="mdui-textfield-input" type="text" disabled />
</div>
<!-- Floating label -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" disabled />
</div>Multiline text field
Replace the input tag of a single-line text field with a textarea tag to create a multiline text field. Multiline text fields automatically adjust their height based on the content.
<div class="mdui-textfield">
<textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>
<!-- Fixed label -->
<div class="mdui-textfield">
<label class="mdui-textfield-label">Subject</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- Floating label -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- Disabled state -->
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Disabled</label>
<textarea class="mdui-textfield-input" disabled></textarea>
</div>Add the rows attribute to the textarea to fix the height of the text field.
<div class="mdui-textfield">
<textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>With help text
Add the element <div class="mdui-textfield-helper"></div> at the end inside <div class="mdui-textfield"></div> to add help text.
<div class="mdui-textfield">
<input type="email" class="mdui-textfield-input" placeholder="Email" />
<div class="mdui-textfield-helper">Helper Text</div>
</div><div class="mdui-textfield">
<i class="mdui-icon material-icons">email</i>
<input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>
<!-- Fixed label -->
<div class="mdui-textfield">
<i class="mdui-icon material-icons">account_circle</i>
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" />
<div class="mdui-textfield-helper">Helper Text</div>
</div>
<!-- Floating label, multiline text field -->
<div class="mdui-textfield mdui-textfield-floating-label">
<i class="mdui-icon material-icons">textsms</i>
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input"></textarea>
</div>
<!-- Disabled state -->
<div class="mdui-textfield">
<i class="mdui-icon material-icons">lock</i>
<input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div><div class="mdui-textfield mdui-textfield-expandable">
<button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</button>
<input class="mdui-textfield-input" type="text" placeholder="Search"/>
<button class="mdui-textfield-close mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">close</i>
</button>
</div>
<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
<button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</button>
<input class="mdui-textfield-input" type="text" placeholder="Search"/>
<button class="mdui-textfield-close mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">close</i>
</button>
</div>Features
Form validation
mdui uses HTML5 for form validation. Add the element <div class="mdui-textfield-error"></div> at the end inside <div class="mdui-textfield"></div> to add error messages.
If both error messages and help text are included, the help text element should be placed after the error message element.
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" required />
<div class="mdui-textfield-error">Username cannot be empty</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" required />
<div class="mdui-textfield-error">Invalid email format</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Password</label>
<input
class="mdui-textfield-input"
type="text"
pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
required
/>
<div class="mdui-textfield-error">Password must be at least 6 characters long and contain both uppercase and lowercase letters</div>
<div class="mdui-textfield-helper">Please enter a password of at least 6 characters containing both uppercase and lowercase letters</div>
</div>In addition to using HTML5 form validation, you can also validate forms with JavaScript.
Add the class .mdui-textfield-invalid to a text field that fails validation, and remove the class after validation passes.
<div class="mdui-textfield mdui-textfield-invalid">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" />
<div class="mdui-textfield-error">Username already exists</div>
</div>Character counter
Add the attribute maxlength="" to the input element to limit the input length. mdui will automatically add a live character counter in the lower-right corner of the text field.
<div class="mdui-textfield">
<label class="mdui-textfield-label">User name</label>
<input class="mdui-textfield-input" type="text" maxlength="20" />
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Email</label>
<input class="mdui-textfield-input" type="email" maxlength="60" />
<div class="mdui-textfield-error">Invalid email format</div>
</div>
<div class="mdui-textfield mdui-textfield-floating-label">
<label class="mdui-textfield-label">Message</label>
<textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>Dynamically generated text field
If your text field is dynamically generated, you need to call mdui.mutation() for initialization.
If you change the content of a text field dynamically, call the mdui.updateTextFields() method to reinitialize it. This method accepts a CSS selector matching the .mdui-textfield class, a DOM element, or an array of DOM elements as its argument, so only specific text fields are reinitialized. If no argument is passed, all text fields on the page are reinitialized.
CSS Classes
| Class Name | Description |
|---|---|
.mdui-textfield | Define a text field. |
.mdui-textfield-floating-label | Define a text field with a floating label. |
.mdui-textfield-label | Define the label of a text field. |
.mdui-textfield-input | Define the input field of a text field. |
.mdui-textfield-error | Define the error message for form validation. |
.mdui-textfield-helper | Define the help text of a text field. |