CodePen Embed - Forms in CodyFrame v4

<div class="container max-width-xs 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" for="input-name">Name</label>
      <input class="form-control width-100%" type="text" name="input-name" id="input-name" required>
     </div>

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

   <div class="margin-bottom-sm">
    <label class="form-label" 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" 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>

.form-control {
  background: var(--color-bg-dark);
  box-shadow: inset 0 0 0 1px var(--color-contrast-lower);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 1em;
  line-height: 1.2;
  transition: 0.2s;
}
.form-control::-moz-placeholder {
  opacity: 1;
  color: var(--color-contrast-low);
}
.form-control::placeholder {
  opacity: 1;
  color: var(--color-contrast-low);
}
.form-control:focus, .form-control:focus-within {
  background: var(--color-bg);
  outline: none;
  box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0), 0 0 0 2px var(--color-primary), var(--shadow-sm);
}

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

/* error */
.form-control[aria-invalid=true],
.form-control.form-control--error {
  box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0), 0 0 0 2px var(--color-error);
}
.form-control[aria-invalid=true]:focus, .form-control[aria-invalid=true]:focus-within,
.form-control.form-control--error:focus,
.form-control.form-control--error:focus-within {
  box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0), 0 0 0 2px var(--color-error), var(--shadow-sm);
}

/* legend */
.form-legend {
  font-weight: 700;
  color: var(--color-contrast-higher);
  line-height: 1.2;
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
}

/* label */
.form-label {
  display: inline-block;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3xs);
}

This Pen is owned by CodyHouse on CodePen.

See more by @codyhouse on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.