<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="col-6@md">
      <label class="form-label margin-bottom-xxs" for="inputName">Name:</label>
      <input class="form-control width-100%" type="text" name="inputName" id="inputName" required>
     </div>

     <div class="col-6@md">
      <label class="form-label margin-bottom-xxs" for="inputEmail">Email:</label>
      <input class="form-control width-100%" type="email" name="inputEmail" id="inputEmail" placeholder="email@myemail.com">
     </div>
    </div>
   </div>

   <div class="margin-bottom-sm">
    <label class="form-label margin-bottom-xxs" for="inputInvalid">Invalid:</label>
    <input class="form-control width-100%" type="text" name="inputInvalid" id="inputInvalid" 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-padding-x: var(--space-sm);
  --form-control-padding-y: var(--space-xs);
  --form-control-radius: 0.25em;
}

.form-control { // basic form element style
  background-color: var(--color-bg);
  border: 2px solid var(--color-contrast-low);
  transition: .3s;

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

  &:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px alpha(var(--color-primary), 0.2)
  }
}

.form-control[aria-invalid="true"] {
  border-color: var(--color-error);

  &:focus {
    box-shadow: 0 0 0 2px alpha(var(--color-error), 0.2);
  }
}

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

.form-legend {
  font-size: var(--text-md);
}

.form-label {
  font-size: var(--text-sm);
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework@2.7.0/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/Wqvpmm

External JavaScript

This Pen doesn't use any external JavaScript resources.