components

text Inputs

Primary Inputs Fields

(Text displayed in an Input Field that describes the expected value for the Input Field.)


 
  • <div class="lp__primary_input">
<label class="input_text" for="primary_inputs">INPUT FIELD</label>
  <form action="" name="input_text">
        <input type="text" name="input-type-text" id="primary_inputs" value="Enter Name" />
  </form>
</div>
<div class="lp__primary_input">
<label class="input_text" for="primary_inputs_focus">HINT TEXT</label>
<p class="lp__lead_paragraph_xs">(Text displayed in an Input Field that describes the expected value for the Input Field.)</p>
  <form action="" name="input_text">
        <input type="text" name="input-type-focus" id="primary_inputs_focus" value="Enter Name" autofocus="autofocus" />
  </form>
</div>
<div class="lp__primary_input" disabled>
<label class="input_text" for="primary_inputs_disabled">INPUT FIELD DISABLED</label>
<form action="" name="input_text"> 
  <input type="text" name="input-type-disabled" id="primary_inputs_disabled" value="Enter Name" disabled="disabled" />    
</form>
</div>
  • Text Inputs should be used in instances where the possible responses to a question within a form are too numerous to reasonably browse with checkboxes, bullets, or dropdowns, or the possible answers are unknown by the form writer.
  • EXAMPLE

Secondary Inputs Fields

Secondary Inverse Inputs Fields

 
  • <div class="lp__secondary_input">
<label class="input_text" for="secondary_inputs">INPUT FIELD</label>
  <form action="" name="input_text">
    <input type="text" name="input-type-text" id="secondary_inputs" />
  </form>
</div>
<div class="lp__secondary_input">
<label class="input_text" for="secondary_inputs_focus">HINT TEXT</label>
  <form action="" name="input_text">     
    <input type="text" name="input-type-focus" id="secondary_inputs_focus" value="Enter Name" autofocus="autofocus" />
  </form>
</div>
<div class="lp__secondary_input" disabled>
<label class="input_text" for="secondary_inputs_disabled">INPUT FIELD DISABLED</label>
<form action="" name="input_text"> 
  <input type="text" name="input-type-disabled" id="secondary_inputs_disabled" value="Enter Name" disabled="disabled" />  
</form>
</div>
<div class="lp__secondary_input secondary_inverse_input">
<label class="input_text" for="secondary_inputs">INPUT FIELD</label>
  <form action="" name="input_text">
    <input type="text" name="input-type-text" id="secondary_inputs" />
  </form>
</div>
<div class="lp__secondary_input secondary_inverse_input">
<label class="input_text" for="secondary_inputs_focus">HINT TEXT</label>
  <form action="" name="input_text">
    <input type="text" name="input-type-focus" id="secondary_inputs_focus" value="Enter Name" autofocus="autofocus" />
  </form>
</div>
<div class="lp__secondary_input secondary_inverse_input" disabled>
<label class="input_text" for="secondary_inputs_disabled">INPUT FIELD DISABLED</label>
<form action="" name="input_text"> 
    <input type="text" name="input-type-disabled" id="secondary_inputs_disabled" value="Enter Name" disabled="disabled" />    
</form>
</div>
  • DESIGNER
  • EXAMPLE