Forms

Modules for styling and layout of forms.

Form fields

Two modules work together in conjunction to style form fields. A form:group can be used to wrap label and a form input. A form:field can be used to style the form input itself; it works on <input>, <textarea>, and <select>.

Form fields fill 100% of their container’s width. To set a smaller width, wrap the form group in a container with a specified width.

@import "kolache/core/form:group" as .form-group;
@import "kolache/core/form:field" as .form-field;

<form>
  <div class="form-group">
    <label for="first-name">First Name</label>
    <input id="first-name" type="text" class="form-field"/>
  </div>
  <div class="form-group">
    <label for="textarea">Textarea</label>
    <textarea id="textarea" class="form-field"></textarea>
  </div>
  <div class="form-group">
    <label for="select-input">Favorite character</label>
    <select id="select-input" class="form-field">
      <option>River</option>
      <option>Mal</option>
      <option>Inara</option>
      <option>Jayne</option>
    </select>
  </div>
  <button class="button">Save</button>
</form>

Variables (form:group):

$default-margin - sets the bottom-margin of the form group
$label-margin - defaults to 0.5rem. Sets the margin beneath the label

Variables (form:field):

$border-color - defaults to $gray-8
$padding - defaults to $offset-padding
$focus-color - defaults to $color-primary
$border-radius

Checkboxes & radio buttons

@import "kolache/core/form:toggle" as .toggle;

Apply the form:toggle to a <label> wrapping a checkbox or radio input:

Do the thing Enable power option

<label class="toggle"><input type="checkbox" /> Do the thing</label>
<label class="toggle"><input type="checkbox" /> Enable power option</label>

For a series of related checkboxes or radio buttons, apply the class to a wrapping <div> or <fieldset> instead:

<div class="toggle">
  <label><input type="radio" name="weekday" /> Monday</label>
  <label><input type="radio" name="weekday" /> Tuesday</label>
  <label><input type="radio" name="weekday" /> Wednesday</label>
</div>
<fieldset class="toggle">
  <legend>Choose a color</legend>
  <label><input type="radio" name="color" /> Green</label>
  <label><input type="radio" name="color" /> Blue</label>
  <label><input type="radio" name="color" /> Mauve</label>
</fieldset>

Variables:

$default-margin - sets the bottom-margin of the form group
$legend-font-weight - specifies font weight for any <legend> elements within the toggle. Defaults to $font-weight-bold.

Form feedback

Use feedback styles to provide color-coded feedback, such as for validation or error states.

@import "kolache/core/form:feedback" as .has-success {
  $color: $color-success;
};
@import "kolache/core/form:feedback" as .has-error {
  $color: $color-danger;
};

Apply this class to a form group to color its label and input. Add a form-feedback element beneath the input to provide a feedback message to the user—this class name is customizable via the $feedback-selector variable.

First Name

Looks good!

First Name

Uh oh!

<div class="form-group has-success">
  <label for="first-name-success">First Name</label>
  <input id="first-name-success" type="text" class="form-field"/>
  <div class="form-feedback">Looks good!</div>
</div>
<div class="form-group has-error">
  <label for="first-name-error">First Name</label>
  <input id="first-name-error" type="text" class="form-field"/>
  <div class="form-feedback">Uh oh!</div>
</div>

Variables:

$color - defaults to $brand-primary
$feedback-selector - CSS selector to use for the feedback box. Defaults to .form-feedback
$feedback-border-width - defaults to 0
$border-radius
$offset-padding