Input fields

eCommerce input fields

Set of input fields dedicated to building eCommerce projects.


Text field



        <div class="md-form md-outline">
          <input type="text" id="materialRegisterFormFirstName" class="form-control">
          <label for="materialRegisterFormFirstName">First name</label>
        </div>

      

Email field



        <div class="md-form md-outline">
          <input type="email" id="defaultForm-email2" class="form-control">
          <label data-error="wrong" data-success="right" for="defaultForm-email2">Your email</label>
        </div>

      

Password field



        <div class="md-form md-outline">
          <input type="password" id="defaultForm-pass2" class="form-control">
          <label data-error="wrong" data-success="right" for="defaultForm-pass2">Your password</label>
        </div>

      

Number field



        <div class="md-form md-outline">
          <input type="number" id="materialRegisterFormPhone" class="form-control" aria-describedby="materialRegisterFormPhoneHelpBlock">
          <label for="materialRegisterFormPhone">Phone number</label>
        </div>    

      

Disabled field



        <div class="md-form md-outline">
          <input type="text" id="inputDisabledEx13" class="form-control" disabled>
          <label for="inputDisabledEx13" class="disabled">Example label</label>
        </div>

      

Placeholder



        <div class="md-form md-outline">
          <input type="text" id="form14" placeholder="House number and street name" class="form-control">
          <label for="form14">Address</label>
        </div>

    

Pre-filled value



        <div class="md-form md-outline">
          <input value="John Doe" type="text" id="inputPrefilledEx" class="form-control">
          <label for="inputPrefilledEx">Example label</label>
        </div>

      

Sizes



        <!-- Large outline input -->
        <div class="md-form md-outline form-lg">
          <input id="form-lg" class="form-control form-control-lg" type="text">
          <label for="form-lg">Example label</label>
        </div>

        <!-- Small outline input -->
        <div class="md-form md-outline form-sm">
          <input id="form-sm" class="form-control form-control-sm" type="text">
          <label for="form-sm">Example label</label>
        </div>

      

Help text

At least 8 characters and 1 digit


        <div class="md-form md-outline">
          <input type="password" id="4defaultForm-pass2" class="form-control">
          <label data-error="wrong" data-success="right" for="4defaultForm-pass2">Your password</label>
          <small id="4materialRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
            At least 8 characters and 1 digit
          </small>
        </div>

      

Textarea



        <div class="md-form md-outline">
          <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
          <label for="form76">Additional information</label>
        </div>