Forms

Tyfy provides basic styles for form elements. The styles are intended for simple forms where each form element consists of a label-input pair.

<form>
  <div>
    <label>Text Input</label>
    <input type="text" name="name">
  </div>  
  <div>
    <label>Number Input</label>
    <input type="number" name="age">
  </div>
</form>

Element spacing has been adjusted so labels are more closely positioned to their associated input than to surrounding elements. There are CSS classes for label elements that provide some presentation options.

Variables

$tyfont-input
$tyfont-sans !default;
Typeface for form elements.
$tywidth-border
2px !default;
Thickness of the borders around form elements.
$tycolor-border
mix($tycolor-fg,$tycolor-bg,12%) !default;
Default border color.

Classes

.label-option
Apply to a label when used adjacent to or to encapsulate a radio button or checkbox input.
.label-inline
Apply to a label to display as an inline-block instead of block element.

Examples

Inputs

<form>
  <div>
    <label>Text Input</label>
    <input type="text" name="name">
  </div>
  <div>
    <label>Number Input</label>
    <input type="number" name="age">
  </div>
  <div>
    <label>Range Input</label>
    <input type="range" name="level" min="1" max="100" step="1" value="40">
  </div>
  <p><input type="submit" name="submit" value="Submit Button"></p>
</form>

Selects

<form>
  <div>
    <label>Select</label>
    <select name="color">
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="yellow">Yellow</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </select>
  </div>
  <div>
    <label>Multiple Select</label>
    <select name="color" multiple="multiple">
      <option value="red">Red</option>
      <option value="orange">Orange</option>
      <option value="yellow">Yellow</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
      <option value="purple">Purple</option>
    </select>
  </div>
  <p><input type="submit" name="submit" value="Submit Button"></p>
  <p><input type="submit" name="submit" disabled="disabled" value="Disabled Button"></p>
</form>

Checkboxes and Radios

<form>
  <fieldset>
    <legend>Fieldset</legend>
    <div>
      <label>Option Labels, Inline</label>
      <div>
        <label class="label-option label-inline"><input type="checkbox" name="sky" value="a"> Option A</label>
        <label class="label-option label-inline"><input type="checkbox" name="sky" value="b"> Option B</label>
        <label class="label-option label-inline"><input type="checkbox" name="sky" value="c"> Option C</label>
      </div>
    </div>
    <div>
      <label>Option Labels, Inline</label>
      <div>
        <label class="label-option label-inline"><input type="radio" name="sky" value="true"> True</label>
        <label class="label-option label-inline"><input type="radio" name="sky" value="false"> False</label>
      </div>
    </div>
    <div>
      <label>Option Labels</label>
      <ul class="list-nobullet sibling-margins-off">
        <li><label class="label-option"><input type="radio" name="roses" value="true"> True</label></li>
        <li><label class="label-option"><input type="radio" name="roses" value="false"> False</label></li>
      </ul>
    </div>
  </fieldset>
  <p><input type="submit" name="submit" value="Submit Button"></p>
</form>
Fieldset