Text field

Required Javascript for this component is at the end of this page.

<Code> 
<!-- Text field -->
<div class="form-group">
    <div class="m-text-field">
        <label class="static-label">Static Label</label>
        <input type="text" class="form-control">
    </div>
</div>
<!-- Outlined text field -->
<div class="form-group">
    <div class="m-text-field">
        <label class="static-label">Static Label</label>
        <input type="text" class="form-control">
    </div>
</div>
<Code> 
<!-- Text field with floating label -->
<div class="form-group">
    <div class="m-text-field">
        <label class="floating-label">Floating Label</label>
        <input type="text" class="form-control">
    </div>
</div>
<!-- Outlined text field with floating label -->
<div class="form-group">
    <div class="m-text-field-outline">
        <label class="floating-label">Floating Label</label>
        <input type="text" class="form-control">
    </div>
</div>
<Code> 
<!-- Text field with primary and accent colors -->
<div class="form-group">
    <div class="m-text-field primary-blue-500 accent-pink-a400">
        <label class="floating-label">Phone</label>
        <input type="text" class="form-control">
    </div>
</div>
<!-- Outlined text field with primary and accent colors -->
<div class="form-group">
    <div class="m-text-field-outline primary-blue-500 accent-pink-a400">
        <label class="floating-label">Phone</label>
        <input type="text" class="form-control">
    </div>
</div>
<Code> 
<!-- Text field small -->
<div class="form-group">
    <div class="m-text-field">
        <label class="floating-label">form-control-sm</label>
        <input type="text" class="form-control form-control-sm" autocomplete="off"/>
    </div>
</div>
<!-- Outlined text field small-->
<div class="form-group">
    <div class="m-text-field-outline">
        <label class="floating-label">form-control-sm</label>
        <input type="text" class="form-control form-control-sm" autocomplete="off"/>
    </div>
</div>
<Code> 
<!-- Text field large -->
<div class="form-group">
    <div class="m-text-field">
        <label class="floating-label">form-control-lg</label>
        <input type="text" class="form-control form-control-lg" autocomplete="off"/>
    </div>
</div>
<!-- Outlined text field large-->
<div class="form-group">
    <div class="m-text-field-outline">
        <label class="floating-label">form-control-lg</label>
        <input type="text" class="form-control form-control-lg" autocomplete="off"/>
    </div>
</div>
These credentials do not match our records.
These credentials do not match our records.
<Code> 
<!-- Text field with help block -->
<div class="form-group has-error">
    <div class="m-text-field">
        <label class="floating-label">Email</label>
        <input type="email" value="someone@example.com" class="form-control">
        <span class="help-block">These credentials do not match our records.</span>
    </div>
</div>

<div class="form-group">
    <div class="m-text-field">
        <label class="floating-label">Password</label>
        <input type="password" value="******" class="form-control">
    </div>
</div>
<!-- Outlined text field with help block -->
<div class="form-group has-error">
    <div class="m-text-field-outline">
        <label class="floating-label">Email</label>
        <input type="email" value="someone@example.com" class="form-control">
        <span class="help-block">These credentials do not match our records.</span>
    </div>
</div>

<div class="form-group">
    <div class="m-text-field-outline">
        <label class="floating-label">Password</label>
        <input type="password" value="******" class="form-control">
    </div>
</div>
<Code> 
<!-- Text area -->
<div class="form-group">
    <div class="m-text-field">
        <label class="floating-label">Comments</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</div>
<!-- Outlined text area -->
<div class="form-group">
    <div class="m-text-field-outline">
        <label class="floating-label">Comments</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</div>
account_box
account_box
<Code> 
<!-- Text field with prepend -->
<div class="form-group">
    <div class="m-text-field">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="static-label">Username</label>
        <input type="text" class="form-control">
    </div>
</div>
<!-- Outlined text field with prepend -->
<div class="form-group">
    <div class="m-text-field-outline">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="static-label">Username</label>
        <input type="text" class="form-control">
    </div>
</div>
vpn_key
vpn_key
<Code> 
<!-- Text field with prepend and floating label -->
<div class="form-group">
    <div class="m-text-field">
        <div class="prepend">
            <i class="material-icons">vpn_key</i>
        </div>
        <label class="floating-label">Password</label>
        <input type="password" class="form-control">
    </div>
</div>
<!-- Outlined text field with prepend and floating label -->
<div class="form-group">
    <div class="m-text-field-outline">
        <div class="prepend">
            <i class="material-icons">vpn_key</i>
        </div>
        <label class="floating-label">Password</label>
        <input type="password" class="form-control">
    </div>
</div>
keyboard
keyboard
<Code> 
<!-- Text field with append -->
<div class="form-group">
    <div class="m-text-field">
        <div class="append">
            <i class="material-icons">keyboard</i>
        </div>
        <label class="floating-label">Pin</label>
        <input type="password" class="form-control">
    </div>
</div>
<!-- Outlined text field with append -->
<div class="form-group">
    <div class="m-text-field-outline">
        <div class="append">
            <i class="material-icons">keyboard</i>
        </div>
        <label class="floating-label">Pin</label>
        <input type="password" class="form-control">
    </div>
</div>

Javascript

<script>
    $(function() {
        // Initialize Text Fields
        $('.m-text-field').textfield();
        $('.m-text-field-outline').textfield();
    });
</script>

If a Text Field is inside a Modal and is already initialized on page load, Redraw it by passing the parameter: 'redraw'.

<script>
    $("#myModal").on('shown.bs.modal', function () {
        // Redraw Text Fields
        $('.m-text-field').textfield('redraw');
        $('.m-text-field-outline').textfield('redraw');
    });
</script>

On this page