Form Elements

Buttons, Inputs, Dropdowns, and More

There are certain places where the default styles in browsers just aren't good enough or too inconsistent between the various browsers. One of the most worst areas of this are the various form elements, so Frow provides a consistent starting point across browsers for you to build off of.

<label>
  Name
  <input type="text" placeholder="Placeholder Text">
</label>

<label>
  ZIP Code
  <input type="tel" maxlength="5">
</label>

<label>
  Dropdown
  <select>
    <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </optgroup>
  </select>
</label>

<label class="row-start">
  <input type="checkbox">
  Option 1
</label>

<label class="row-start">
  <input type="radio" name="group-one" checked>
  Option 1
</label>

<div class="frow justify-around">
  <button class="col-xs-3-10">Regular</button>
  <button class="col-xs-3-10" disabled>Disabled</button>
  <a type="button" class="col-xs-3-10">Anchor</a>
</div>

Customizable: You can color the elements to match your projects theme instantly using Sass variables, or even disable Frow's form styling completely.

Button Appearances

Classes to quickly change a button's appearance from the default. The .button-link class transforms a button to look like a link; useful when navigating the user without actually changing the page. The .button-none class allows you to wrap any other type of element (image/svg/div/etc.) into a button.

<p>
  A button appearing as a <button type="button" class="button-link">link</button>.
</p>

<button type="button" class="button-none">
  <svg>...</svg>
</button>

Labels

To improve the usefulness of wrapping labels around form elements, labels by default are display:flex. You can use any of the Frow Shortcuts to alter the behavior of contents within the label. As a bonus, because the label is wrapping the input, they are automatically linked together: Clicking the label jumps to the input.

<label>
  First Name
  <input>
</label>

<label class="column-center">
  First Name
  <input>
</label>

<label class="row-start">
  <span class="shrink-0">First Name</span>
  <input>
</label>

// A .label class is provided to style like a label without being a label
<div class="label">
  Group Label
</div>

Customize To Your Liking

Frow's elements are a simple starting point ready for customization. Whether you love the default look and just want to add a splash of color, or want to do a big overhaul, Frow has provided you with a great starting point across all browsers. Make the design yours!

<style>
  select.my-custom-select {
    border: 0;
    border-radius: 3px;
    background-color: lightseagreen;
    color: #fff;
  }
  button.my-custom-button {
    background: none;
    border: 2px solid lightseagreen;
    color: lightseagreen;
  }
</style>

Customizable: Just want to change the overall color to match your theme? You don't even need to write CSS if you just use Frow's Sass variables. Have themed buttons in under 30 seconds.