Getting started

Forms have never been more intuitive! With global styling, all text inputs, selects, and textareas maintain a uniform appearance, ensuring a consistent user experience.

By default, all form elements are set to 100% width with a 1px border. When focused, the border turns blue, making it easy for users to identify the active field.

<form action="javascript:void(0);">
  <fieldset>
    <label for="text">First Name</label>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <div class="input">
      <input type="text" name="text" id="text" placeholder="Enter your first name">
    </div>
  </fieldset>

  <fieldset>...</fieldset>

  <fieldset>...</fieldset>
</form>

Fieldset - Max Width

To ensure elements do not exceed a certain width, apply the .fieldset--widthMax class.

<fieldset class="fieldset--widthMax">...</fieldset>

Overriding Default Widths

By default, inputs are 100% width, but you can override this using .input--10pc to .input--90pc.

Class:	Width:	Example:
`.input--10pc`	10%
`.input--20pc`	20%
`.input--30pc`	30%
`.input--40pc`	40%
`.input--50pc`	50%
`.input--60pc`	60%
`.input--70pc`	70%
`.input--80pc`	80%
`.input--90pc`	90%

Inline Fieldsets & Elements

Need multiple inputs side by side? Wrap them inside a .inline div, and apply .inline__child to each fieldset.

<div class="inline">
  <fieldset class="inline__child">...</fieldset>
  <fieldset class="inline__child">...</fieldset>
</div>

Inline Children (Width Modifier)

You can also adjust the width of inline children using .inline__child--grid-X, where X is the number of columns.

<div class="inline">
  <fieldset class="inline__child">...</fieldset>
  <fieldset class="inline__child inline__child--grid-2">...</fieldset>
  <fieldset class="inline__child">...</fieldset>
</div>