DAHLIA Pattern Library

Input Address 

<div class="form-address row ">
    <div class="form-group-street large-12 columns">
        <label for="address" class="">Address</label>
        <input type="text" name="address" placeholder="Street Address" class="" />
    </div>
    <div class="form-group-apt large-12 columns">
        <label for="address2" class="">Address 2</label>
        <input type="text" name="address2" placeholder="Apt or Unit #" class="" />
    </div>
    <div class="small-7 columns">
        <label for="city" class="">City</label>
        <input type="text" name="city" placeholder="City Name" class="" />
    </div>
    <div class="small-5 columns">
        <label for="state" class="">State</label>
        <label for="state" class="sr-only">Label</label>
        <select name="state" id="state" class="" data-width="auto">
      <option value="">Select</option>
        <option value="1">Option 1</option>
    	<option value="2">Option 2</option>
    	<option value="3">Option 3</option>
    	<option value="4">Option 4</option>
    	<option value="5">Option 5</option>
    	<option value="6">Option 6</option>
    </select> </div>
    <div class="small-12 columns">
        <label for="zip" class="">Zip</label>
        <input type="text" name="zip" placeholder="Zip Code" class="" />
    </div>
</div>
 
<div class="form-address row {{default classes ''}}">
  <div class="form-group-street large-12 columns">
    <label for="address" class="{{default visibility ''}}">Address</label>
    <input type="text" name="address" placeholder="Street Address" class="{{default classes ''}}" />
  </div>
  <div class="form-group-apt large-12 columns">
    <label for="address2" class="{{default visibility ''}}">Address 2</label>
    <input type="text" name="address2" placeholder="Apt or Unit #" class="{{default classes ''}}"/>
  </div>
  <div class="small-7 columns">
    <label for="city" class="{{default visibility ''}}">City</label>
    <input type="text" name="city" placeholder="City Name" class="{{default classes ''}}"/>  
  </div>
  <div class="small-5 columns">
    <label for="state" class="{{default visibility ''}}">State</label>
    {{> @select name="state" placeholder="Select" options=inputs.states}}
  </div>
  <div class="small-12 columns">
    <label for="zip" class="{{default visibility ''}}">Zip</label>
    <input type="text" name="zip" placeholder="Zip Code" class="{{default classes ''}}"/>
  </div>
</div>
 
/* No context defined for this component. */

There are no notes for this item.