Astro Forms - Ecommerce

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Inputs

Default

<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <input type="text" placeholder="Disabled" class="form-control" disabled />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-text text-body">
            <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
            </svg>
          </span>
          <input type="text" class="form-control" placeholder="Search">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Birthday">
          <span class="input-group-text text-body end-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87c1.355 0 2.697.055 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75l-1.5.75a3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0L3 16.5m15-3.38a48.474 48.474 0 00-6-.37c-2.032 0-4.034.125-6 .37m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 013 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 016 13.12M12.265 3.11a.375.375 0 11-.53 0L12 2.845l.265.265zm-3 0a.375.375 0 11-.53 0L9 2.845l.265.265zm6 0a.375.375 0 11-.53 0L15 2.845l.265.265z" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group has-success">
        <input type="text" placeholder="Success" class="form-control is-valid" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group has-danger">
        <input type="email" placeholder="Error Input" class="form-control is-invalid" />
      </div>
    </div>
  </div>
</form>

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

For all form control you can apply the additional modifier classes explained in the Inputs section: .form-control-alternative, .form-control-flush and .form-control-muted.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

HTML5 inputs

Text

URL

Phone

Password

Number

Datetime

Date

Month

Week

Time

Color

<form>
    <div class="form-group">
        <label for="example-text-input" class="form-control-label">Text</label>
        <input class="form-control" type="text" value="John Snow" id="example-text-input">
    </div>
    <div class="form-group">
        <label for="example-search-input" class="form-control-label">Search</label>
        <input class="form-control" type="search" value="Tell me your secret ..." id="example-search-input">
    </div>
    <div class="form-group">
        <label for="example-email-input" class="form-control-label">Email</label>
        <input class="form-control" type="email" value="@example.com" id="example-email-input">
    </div>
    <div class="form-group">
        <label for="example-url-input" class="form-control-label">URL</label>
        <input class="form-control" type="url" value="" id="example-url-input">
    </div>
    <div class="form-group">
        <label for="example-tel-input" class="form-control-label">Phone</label>
        <input class="form-control" type="tel" value="40-(770)-888-444" id="example-tel-input">
    </div>
    <div class="form-group">
        <label for="example-password-input" class="form-control-label">Password</label>
        <input class="form-control" type="password" value="password" id="example-password-input">
    </div>
    <div class="form-group">
        <label for="example-number-input" class="form-control-label">Number</label>
        <input class="form-control" type="number" value="23" id="example-number-input">
    </div>
    <div class="form-group">
        <label for="example-datetime-local-input" class="form-control-label">Datetime</label>
        <input class="form-control" type="datetime-local" value="2018-11-23T10:30:00" id="example-datetime-local-input">
    </div>
    <div class="form-group">
        <label for="example-date-input" class="form-control-label">Date</label>
        <input class="form-control" type="date" value="2018-11-23" id="example-date-input">
    </div>
    <div class="form-group">
        <label for="example-month-input" class="form-control-label">Month</label>
        <input class="form-control" type="month" value="2018-11" id="example-month-input">
    </div>
    <div class="form-group">
        <label for="example-week-input" class="form-control-label">Week</label>
        <input class="form-control" type="week" value="2018-W23" id="example-week-input">
    </div>
    <div class="form-group">
        <label for="example-time-input" class="form-control-label">Time</label>
        <input class="form-control" type="time" value="10:30:00" id="example-time-input">
    </div>
    <div class="form-group">
        <label for="example-color-input" class="form-control-label">Color</label>
        <input class="form-control" type="color" value="#5e72e4" id="example-color-input">
    </div>
</form>

Sizing

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes

Check this custom checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="fcustomCheck1" checked="">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Radios

Toggle this custom radio

Or toggle this other custom radio

<div class="form-check mb-3">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio1">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio2">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Disabled

Check this custom checkbox

Toggle this custom radio

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="form-check">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="form-check-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Toggles

Toggle

Checked switch

Disabled

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Toggle</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled</label>
</div>