<div class="container max-width-sm padding-y-lg">
 <form>
  <fieldset class="margin-bottom-md">
   <legend class="form-legend">Form Legend</legend>

   <div class="margin-bottom-sm">
    <div class="grid gap-sm">
     <div class="[email protected]">
      <label class="form-label margin-bottom-xxs" for="input-name">Name:</label>
      <input class="form-control width-100%" type="text" name="input-name" id="input-name" required>
     </div>

     <div class="[email protected]">
      <label class="form-label margin-bottom-xxs" for="input-email">Email:</label>
      <input class="form-control width-100%" type="email" name="input-email" id="input-email" placeholder="[email protected]">
     </div>
    </div>
   </div>

   <div class="margin-bottom-sm">
    <label class="form-label margin-bottom-xxs" for="input-invalid">Invalid:</label>
    <input class="form-control width-100%" type="text" name="input-invalid" id="input-invalid" aria-invalid="true" value="invalid data">
   </div>

   <div>
    <label class="form-label margin-bottom-xxs" for="textarea">Textarea:</label>
    <textarea class="form-control width-100%" name="textarea" id="textarea"></textarea>
   </div>
  </fieldset>

  <div class="text-right">
   <button class="btn btn--primary">Submit</button>
  </div>
 </form>
</div>
// --------------------------------

// Forms | ­čÉ×CodyFrame https://codyhouse.co/ds/get-started

// --------------------------------

:root {
  --form-control-font-size: 1em;
  --form-control-padding-x: var(--space-xs);
  --form-control-padding-y: var(--space-xxs);
  --form-control-radius: var(--radius-md);
}

.form-control {
  background: var(--color-bg-dark);
  line-height: 1.2;
  box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower);
  transition: all 0.2s ease;

  &::placeholder {
    opacity: 1;  
    color: var(--color-contrast-low);
  }

  &:focus {
    background: var(--color-bg);
    box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-primary), var(--shadow-sm);
    outline: none;
  }
}

.form-control--disabled, .form-control[disabled], .form-control[readonly] {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-control[aria-invalid="true"], .form-control.form-control--error {
  box-shadow: inset 0px 0px 0px  alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error);

  &:focus {
    box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm);
  }
}

.form-legend {}
.form-label {}
View Compiled

External CSS

  1. https://assets.codepen.io/148866/codyframe-3-all-but-forms.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.