<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 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>

  <fieldset class="margin-bottom-md">
    <legend class="form-legend">Radio Buttons</legend>

    <ul class="radio-list">
      <li>
        <input type="radio" name="radioButton" id="radio1" checked>
        <label for="radio1">Choice 1</label>
      </li>

      <li>
        <input type="radio" name="radioButton" id="radio2">
        <label for="radio2">Choice 2</label>
      </li>
    </ul>
  </fieldset>

  <fieldset class="margin-bottom-md">
    <legend class="form-legend">Checkboxes</legend>

    <div class="checkbox-list flex flex-wrap flex-gap-sm">
      <div>
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1">Option 1</label>
      </div>

      <div>
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2">Option 2</label>
      </div>
    </div>
  </fieldset>

  <div>
    <button class="btn btn--primary">Submit</button>
  </div>
</form>
</div>
// Forms - 🐞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
  border: 2px solid var(--color-contrast-low);

  &:focus {
    outline: none;
    border-color: var(--color-primary);
    --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    box-shadow: 0 0 0 3px var(--color-shadow);
  }
}

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

  &:focus {
    --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);
    box-shadow: 0 0 0 3px var(--color-shadow);
  }
}

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

.form-legend {}

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

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/codyhouse-framework-2.0.0_base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.