turretcss

Form

A guide to turretcss's default styling of form elements including examples of input types and sizes, input-groups, controls, and selects.

Contents

Example

<form>
  <div class="field">
    <label for="form-simple-email">Email</label>
    <input type="email" id="form-simple-email" placeholder="Enter Email">
  </div>
  <div class="field">
    <label for="form-simple-password">Password</label>
    <input type="password" id="form-simple-password" placeholder="Enter Password">
  </div>
  <div class="field">
    <label class="control checkbox">
      <input type="checkbox" name="checkbox" checked="true">
      <span class="control-indicator"></span>
      <span class="control-label">I agree to checking this checkbox</span>
    </label>
  </div>
  <div class="field">
    <button type="submit" class="button">Submit</button>
    <button type="reset" class="button">Reset</button>
  </div>
</form>

Field

The field is a <div> that wraps an label and input in a form to normalise margins.

--field-margin: var(--margin-xs) 0;
<div class="field">...</div>

Field Float Label

--field-float-label-padding: 0.25em;
<div class="field field-float-label">
  <input type="text" id="field">
  <label for="field">...</label>
</div>

Label

--label-margin: 1rem 0;
--label-font-family: inherit;
--label-font-weight: inherit;
--label-font-size: var(--font-size-s);
--label-color: inherit;
--label-line-height: var(--line-height-m);
<label for="input">...</label>

Fieldset

--fieldset-margin: var(--field-margin);
--fieldset-padding: var(--padding-xs);
--fieldset-border-width: var(--border-width);
--fieldset-border-style: var(--border-style);
--fieldset-border-color: var(--border-color);
--fieldset-border-radius: var(--border-radius);
<fieldset>...</fieldset>

Legend

Login
--legend-padding: 0.5em;
--legend-font-family: inherit;
--legend-font-weight: inherit;
--legend-font-size: var(--font-size-m);
--legend-color: inherit;
<fieldset>
  <legend>...</legend>
</fieldset>

Form Message

Form message

Form message success

Form message error

Form message warning

Form message info

--form-message-margin: var(--label-margin);
--form-message-font-family: var(--paragraph-font-family);
--form-message-font-weight: var(--paragraph-font-weight);
--form-message-font-size: var(--font-size-s);
--form-message-color: var(--paragraph-color);
--form-message-line-height: var(--paragraph-line-height);
<p class="form-message">...</p>
<p class="form-message success">...</p>
<p class="form-message error">...</p>
<p class="form-message warning">...</p>
<p class="form-message info">...</p>

Input

--input-margin: var(--label-margin);
--input-padding: 0 1em;
--input-height: var(--height-m);
--input-color: inherit;
--input-font-family: inherit;
--input-font-weight: inherit;
--input-font-size: var(--font-size-m);
--input-line-height: var(--line-height-m);
--input-background: var(--background);
--input-border-width: var(--border-width);
--input-border-style: var(--border-style);
--input-border-color: var(--border-color);
--input-border-radius: var(--border-radius);
--input-box-shadow: var(--box-shadow);

--input-placeholder-color: var(--input-color);
--input-placeholder-opacity: 0.5;

--input-hover-color: var(--input-color);
--input-hover-background: color(var(--input-background) shade(2%));
--input-hover-border-color: color(var(--light) shade(10%));
--input-hover-box-shadow: var(--hover-box-shadow);

--input-focus-color: var(--input-color);
--input-focus-background: color(var(--input-background) shade(2%));
--input-focus-border-color: var(--primary);
--input-focus-box-shadow: var(--focus-box-shadow);

--input-disabled-color: var(--input-color);
--input-disabled-background: color(var(--input-background) shade(5%));
--input-disabled-border-color: var(--input-border-color);

--textarea-padding: 1em;
--textarea-line-height: inherit;
<label for="input-text">Text Input</label>
<input type="text" id="input-text" placeholder="Text">

<label for="input-inverse">Inverse Input</label>
<input class="input-inverse" type="text" id="input-inverse" placeholder="Inverse">

<label for="input-disabled">Disabled</label>
<input type="text" id="input-disabled" placeholder="Disabled" disabled="">

<label for="input-email">Email Input</label>
<input type="email" id="input-email" placeholder="Email">

<label for="input-search">Search Input</label>
<input type="search" id="input-search" placeholder="Search">

<label for="input-tel">Telephone Input</label>
<input type="tel" id="input-tel" placeholder="Telephone">

<label for="input-url">URL Input</label>
<input type="url" id="input-url" placeholder="http://">

<label for="input-password">Password Input</label>
<input type="password" id="input-password" value="password">

<label for="input-file">File Input</label>
<input type="file" id="input-file">

<label for="input-textarea">Textarea</label>
<textarea id="input-textarea" cols="30" rows="5" placeholder="Textarea text"></textarea>

<label for="input-number">Number Input</label>
<input type="number" id="input-number" min="0" max="10" placeholder="Enter a number form 0 to 10">

<label for="input-date">Date Input</label>
<input type="date" id="input-date">

<label for="input-month">Month Input</label>
<input type="month" id="input-month">

<label for="input-week">Week Input</label>
<input type="week" id="input-week">

<label for="input-datetime">Datetime Input</label>
<input type="datetime" id="input-datetime" placeholder="Enter a datetime string">

<label for="input-datetime-local">Datetime-local Input</label>
<input type="datetime-local" id="input-datetime-local">

<label for="input-color">Color Input</label>
<input type="color" id="input-color" value="#3455DB">

<input id="input-checkbox" type="checkbox" name="checkbox" value="Checkbox Input">
<label for="input-checkbox">Checkbox Input</label>

<input id="input-radio" type="radio" name="radio" value="Radio Input">
<label for="input-radio">Radio Input</label>

Input Indicators

<label for="error">...</label>
<input class="error" type="text" id="error">

<label for="warning">...</label>
<input class="warning" type="text" id="warning">

<label for="success">...</label>
<input class="success" type="text" id="success">

<label for="info">...</label>
<input class="info" type="text" id="info">

Input Sizes

--input-xl-padding: var(--input-padding);
--input-xl-height: var(--height-xl);
--input-xl-font-size: var(--font-size-xl);

--input-l-padding: var(--input-padding);
--input-l-height: var(--height-l);
--input-l-font-size: var(--font-size-l);

--input-s-padding: var(--input-padding);
--input-s-height: var(--height-s);
--input-s-font-size: var(--font-size-s);

--input-xs-padding: var(--input-padding);
--input-xs-height: var(--height-xs);
--input-xs-font-size: var(--font-size-xs);
<input class="input-xl" type="text">
<input class="input-l" type="text">
<input type="text">
<input class="input-s" type="text">
<input class="input-xs" type="text">

Input Group

<div class="input-group">
  <input type="text">
  <button class="button" type="submit">...</button>
</div>

Input Group Sizes

<div class="input-group">
  <input class="input-xl" type="text">
  <button class="button button-xl" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-l" type="text">
  <button class="button button-l" type="submit">...</button>
</div>

<div class="input-group">
  <input type="text">
  <button class="button" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-s" type="text">
  <button class="button button-s" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-xs" type="text">
  <button class="button button-xs" type="submit">...</button>
</div>

Control

--control-margin: var(--input-margin);
--control-padding: 0;
--control-font-family: var(--input-font-family);
--control-font-weight: var(--input-font-weight);
--control-font-size: var(--input-font-size);
--control-color: var(--input-color);
--control-line-height: var(--input-line-height);

--control-hover-indicator-background: var(--input-hover-background);
--control-hover-indicator-border-color: var(--input-hover-border-color);
--control-hover-indicator-box-shadow: var(--input-hover-box-shadow);

--control-focus-indicator-background: var(--input-focus-background);
--control-focus-indicator-border-color: var(--input-focus-border-color);
--control-focus-indicator-box-shadow: var(--input-focus-box-shadow);

--control-checked-indicator-background: var(--primary);
--control-checked-indicator-border: var(--border-width) var(--border-style) var(--input-focus-border-color);
--control-checked-label-color: var(--control-label-color);

--control-indicator-size: 1.5rem;
--control-indicator-background: var(--input-background);
--control-indicator-border-width: var(--input-border-width);
--control-indicator-border-style: var(--input-border-style);
--control-indicator-border-color: var(--input-border-color);
--control-indicator-box-shadow: var(--input-box-shadow);

--control-label-margin: 0 0 0 1rem;
--control-label-color: inherit;

--control-inline-margin-right: 2rem;

Checkbox

--checkbox-indicator-border-radius: var(--input-border-radius);
<label class="control checkbox">
  <input type="checkbox" name="checkbox">
  <span class="control-indicator"></span>
  <span class="control-label">Checkbox</span>
</label>

Radio

--radio-indicator-size: 0.5em;
--radio-indicator-background: var(--input-background);
--radio-indicator-border-radius: var(--control-indicator-size);
<label class="control radio">
  <input type="radio" name="radio">
  <span class="control-indicator"></span>
  <span class="control-label">Radio</span>
</label>

Switch

--switch-indicator-background: var(--control-indicator-background);
--switch-indicator-border-radius: var(--control-indicator-size);
<label class="control switch">
  <input type="checkbox" name="checkbox">
  <span class="control-indicator"></span>
  <span class="control-label">Switch</span>
</label>

Checkbox Inline

<label class="control control-inline checkbox">
  <input type="checkbox" name="checkbox">
  <span class="control-indicator"></span>
  <span class="control-label">Checkbox</span>
</label>
<label class="control control-inline checkbox">
  <input type="checkbox" name="checkbox">
  <span class="control-indicator"></span>
  <span class="control-label">Checkbox</span>
</label>
<label class="control control-inline checkbox">
  <input type="checkbox" name="checkbox">
  <span class="control-indicator"></span>
  <span class="control-label">Checkbox</span>
</label>

Radio Inline

<label class="control control-inline radio">
  <input type="radio" name="radio">
  <span class="control-indicator"></span>
  <span class="control-label">Radio</span>
</label>
<label class="control control-inline radio">
  <input type="radio" name="radio">
  <span class="control-indicator"></span>
  <span class="control-label">Radio</span>
</label>
<label class="control control-inline radio">
  <input type="radio" name="radio">
  <span class="control-indicator"></span>
  <span class="control-label">Radio</span>
</label>

Control Indicators

Checkbox

<label class="control checkbox error">...</label>
<label class="control checkbox warning">...</label>
<label class="control checkbox success">...</label>
<label class="control checkbox info">...</label>

Radio

<label class="control radio error">...</label>
<label class="control radio warning">...</label>
<label class="control radio success">...</label>
<label class="control radio info">...</label>

Switch

<label class="control switch error">...</label>
<label class="control switch warning">...</label>
<label class="control switch success">...</label>
<label class="control switch info">...</label>

Control Sizes

Checkbox

Radio

Switch

--control-xl-font-size: var(--font-size-xl);
--control-xl-indicator-size: 2rem;

--control-l-font-size: var(--font-size-l);
--control-l-indicator-size: 1.75rem;

--control-s-font-size: var(--font-size-s);
--control-s-indicator-size: 1.25rem;

--control-xs-font-size: var(--font-size-xs);
--control-xs-indicator-size: 1rem;
<label class="control control-xl">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-l">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-s">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

<label class="control control-xs">
  <input type="..." name="...">
  <span class="control-indicator"></span>
  <span class="control-label">...</span>
</label>

Select

--select-margin: var(--input-margin);
--select-padding: var(--input-padding);
--select-height: var(--input-height);
--select-font-family: var(--input-font-family);
--select-font-weight: var(--input-font-weight);
--select-font-size: var(--input-font-size);
--select-color: var(--input-color);
--select-line-height: auto;
--select-background: var(--input-background);
--select-border-width: var(--input-border-width);
--select-border-style: var(--input-border-style);
--select-border-color: var(--input-border-color);
--select-border-radius: var(--border-radius);
--select-box-shadow: var(--input-box-shadow);

--select-arrow-size: 4px;
--select-arrow-background: var(--dark);

--select-hover-color: var(--input-hover-color);
--select-hover-background: var(--input-hover-background);
--select-hover-border-color: var(--input-hover-border-color);
--select-hover-box-shadow: var(--input-hover-box-shadow);

--select-focus-color: var(--input-focus-color);
--select-focus-background: var(--input-focus-background);
--select-focus-border-color: var(--input-focus-border-color);
--select-focus-box-shadow: var(--input-focus-box-shadow);

--select-disabled-color: var(--input-disabled-color);
--select-disabled-background: var(--input-disabled-background);
--select-disabled-border-color: var(--input-disabled-border-color);
<label class="select" for="select">
  <select id="select">...</select>
</label>

<label class="select" for="select">
  <select id="select" disabled>...</select>
</label>

Select Indicators

<label class="select error" for="select-error">
  <select id="select-error">...</select>
</label>

<label class="select warning" for="select-warning">
  <select id="select-warning">...</select>
</label>

<label class="select success" for="select-success">
  <select id="select-success">...</select>
</label>

<label class="select select-s" for="select-s">
  <select id="select-s">...</select>
</label>

<label class="select info" for="select-info">
  <select id="select-info">...</select>
</label>

Select Sizes

--select-xl-padding: var(--input-xl-padding);
--select-xl-height: var(--input-xl-height);
--select-xl-font-size: var(--input-xl-font-size);

--select-l-padding: var(--input-l-padding);
--select-l-height: var(--input-l-height);
--select-l-font-size: var(--input-l-font-size);

--select-s-padding: var(--input-s-padding);
--select-s-height: var(--input-s-height);
--select-s-font-size: var(--input-s-font-size);

--select-xs-padding: var(--input-xs-padding);
--select-xs-height: var(--input-xs-height);
--select-xs-font-size: var(--input-xs-font-size);
<label class="select select-xl" for="select-xl">
  <select id="select-xl">...</select>
</label>

<label class="select select-l" for="select-l">
  <select id="select-l">...</select>
</label>

<label class="select" for="select-m">
  <select id="select-m">...</select>
</label>

<label class="select select-s" for="select-s">
  <select id="select-s">...</select>
</label>

<label class="select select-xs" for="select-xs">
  <select id="select-xs">...</select>
</label>

Range

<input type="range" min="0" max="100" />
<input type="range" min="0" max="100" disabled />
--range-margin: var(--input-margin);
--range-padding: 0;
--range-height: 0.75rem;

--range-thumb-width: 2em;
--range-thumb-height: var(--range-thumb-width);
--range-thumb-background: var(--input-background);
--range-thumb-border-width: var(--input-border-width);
--range-thumb-border-style: var(--input-border-style);
--range-thumb-border-color: var(--input-border-color);
--range-thumb-border-radius: 50%;
--range-thumb-box-shadow: var(--input-box-shadow);

--range-thumb-hover-background: var(--input-hover-background);
--range-thumb-hover-border-color: var(--input-hover-border-color);
--range-thumb-hover-box-shadow: var(--input-hover-box-shadow);

--range-thumb-focus-background: var(--input-focus-background);
--range-thumb-focus-border-color: var(--input-focus-border-color);
--range-thumb-focus-box-shadow: var(--input-focus-box-shadow);

--range-track-background: var(--input-border-color);
--range-track-border-width: 0;
--range-track-border-style: none;
--range-track-border-color: none;
--range-track-border-radius: var(--input-border-radius);
--range-track-box-shadow: var(--input-box-shadow);

--range-track-hover-background: var(--input-hover-border-color);
--range-track-hover-border-color: none;
--range-track-hover-box-shadow: var(--input-hover-box-shadow);

--range-track-focus-background: var(--input-focus-border-color);
--range-track-focus-border-color: none;
--range-track-focus-box-shadow: var(--input-focus-box-shadow);

Range Indicators

<input class="error" type="range" />
<input class="warning" type="range" />
<input class="success" type="range" />
<input class="info" type="range" />

Range Sizes

<input class="range-xl" type="range" />
<input class="range-l" type="range" />
<input type="range" />
<input class="range-s" type="range" />
<input class="range-xs" type="range" />
--range-xl-height: 1rem;
--range-l-height: 0.875rem;
--range-s-height: 0.675rem;
--range-xs-height: 0.5rem;

Progress

70%
<progress value="70" max="100">70%</progress>
--progress-margin: var(--input-margin);
--progress-height: 1rem;
--progress-background: var(--input-border-color);
--progress-border-width: 0;
--progress-border-style: none;
--progress-border-color: none;
--progress-border-radius: var(--input-border-radius);
--progress-box-shadow: var(--box-shadow);

--progress-bar-background: var(--primary);

Progress Indicators

70% 70% 70% 70%
<progress class="error">...</progress>
<progress class="warning">...</progress>
<progress class="success">...</progress>
<progress class="info">...</progress>

Progress Sizes

70% 70% 70% 70% 70%
<progress class="progress-xl">...</progress>
<progress class="progress-l">...</progress>
<progress>...</progress>
<progress class="progress-s">...</progress>
<progress class="progress-xs">...</progress>
--progress-xl-height: 1.25rem;
--progress-l-height: 1.125rem;
--progress-s-height: 0.875rem;
--progress-xs-height: 0.75rem;