Spectre CSS

Forms ​

JS Optional

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

Form controls ​

Input ​

html
<!-- form input control -->
<div class="form-group">
  <label class="form-label" for="input-example-1">Name</label>
  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
</div>

Input types ​

Textarea ​

html
<!-- form textarea control -->
<div class="form-group">
  <label class="form-label" for="input-example-3">Message</label>
  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
</div>

Select ​

html
<!-- form select control -->
<div class="form-group">
  <select class="form-select">
    <option>Choose an option</option>
    <option>Slack</option>
    <option>Skype</option>
    <option>Hipchat</option>
  </select>
</div>

Radio ​

html
<!-- form radio control -->
<div class="form-group">
  <label class="form-label">Gender</label>
  <label class="form-radio">
    <input type="radio" name="gender" checked>
    <i class="form-icon"></i> Male
  </label>
  <label class="form-radio">
    <input type="radio" name="gender">
    <i class="form-icon"></i> Female
  </label>
</div>

Switch ​

html
<!-- form switch control -->
<div class="form-group">
  <label class="form-switch">
    <input type="checkbox">
    <i class="form-icon"></i> Send me emails with news and tips
  </label>
</div>

Checkbox ​

html
<!-- form checkbox control -->
<div class="form-group">
  <label class="form-checkbox">
    <input type="checkbox">
    <i class="form-icon"></i> Remember me
  </label>
</div>

You can change checkbox to indeterminate state by setting the indeterminate property of checkbox inputs to true via JavaScript:

js
$('#checkbox-example input').indeterminate = true

Icons ​

Spectre Forms components has Spectre Icons support.

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

html
<!-- form input with Spectre icon -->
<div class="has-icon-left">
  <input type="text" class="form-input" placeholder="...">
  <i class="form-icon icon icon-check"></i>
</div>

You can use the loading class for loading or posting state.

html
<!-- form input with loading icon -->
<div class="has-icon-right">
  <input type="text" class="form-input" placeholder="...">
  <i class="form-icon loading"></i>
</div>

Layout ​

Inline forms ​

You can add the form-inline class to the form components to make them inline in one row.

html
<div class="form-group">
  <label class="form-radio form-inline">
    <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
  </label>
  <label class="form-radio form-inline">
    <input type="radio" name="gender"><i class="form-icon"></i> Female
  </label>
</div>

<div class="form-group">
  <label class="form-checkbox form-inline">
    <input type="checkbox"><i class="form-icon"></i> Checkbox 1
  </label>
  <label class="form-checkbox form-inline">
    <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
  </label>
</div>

Horizontal forms ​

If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.

html
<form class="form-horizontal">
  <div class="form-group">
    <div class="col-3 col-sm-12">
      <label class="form-label" for="input-example-1">Name</label>
    </div>
    <div class="col-9 col-sm-12">
      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
    </div>
  </div>
  <!-- form structure -->
</form>

Groups ​

slack.com/
slack.com/
slack.com/

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

html
<!-- normal input group -->
<div class="input-group">
  <span class="input-group-addon">...</span>
  <input type="text" class="form-input" placeholder="...">
</div>

<!-- large input group -->
<div class="input-group">
  <span class="input-group-addon addon-lg">...</span>
  <input type="text" class="form-input input-lg" placeholder="...">
</div>

<!-- normal input group with button -->
<div class="input-group">
  <span class="input-group-addon">...</span>
  <input type="text" class="form-input" placeholder="...">
  <button class="btn btn-primary input-group-btn">Submit</button>
</div>

Sizes ​

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

Styles ​

Validation styles ​

Input

The name is valid.

Passwords must have at least 8 characters.

Select

The option is invalid.

The option is available.

Checkbox, Radio and Switch (Error state only)

To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements. Use the form-input-hint class to provide form validation success and error messages.

html
<form>
  <!-- form validation class: has-success -->
  <div class="form-group has-success">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input" type="text" id="input-example-1" placeholder="...">
    <p class="form-input-hint">The name is invalid.</p>
  </div>

  <!-- form validation class: is-success -->
  <div class="form-group">
    <label class="form-label" for="input-example-1">Name</label>
    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
    <p class="form-input-hint">The name is invalid.</p>
  </div>

  <!-- form validation example for checkbox, radio and switch -->
  <div class="form-group">
    <label class="form-checkbox is-error">
      <input type="checkbox">
      <i class="form-icon"></i> Remember me
    </label>
  </div>
</form>

You can use input pattern attribute to validate the value as well.

html
<!-- pattern validation example for Email -->
<input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">

<!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
<input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">

Disabled styles ​

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

html
<form action="#forms">
  <fieldset disabled>
    <div class="form-group">
      <label class="form-label" for="input-example-19">Name</label>
      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
    </div>
    <div class="form-group">
      <label class="form-label">Gender</label>
      <label class="form-radio">
        <input type="radio" name="gender" disabled>
        <i class="form-icon"></i> Male
      </label>
      <label class="form-radio">
        <input type="radio" name="gender" disabled>
        <i class="form-icon"></i> Female
      </label>
    </div>
    <div class="form-group">
      <select class="form-select" disabled>
        <option>Choose an option</option>
        <option>Slack</option>
        <option>Skype</option>
        <option>Hipchat</option>
      </select>
    </div>
    <div class="form-group">
      <label class="form-switch">
        <input type="checkbox" disabled>
        <i class="form-icon"></i> Send me emails with news and tips
      </label>
    </div>
    <div class="form-group">
      <label class="form-label" for="input-example-20">Message</label>
      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
    </div>
    <div class="form-group">
      <label class="form-checkbox">
        <input type="checkbox" disabled>
        <i class="form-icon"></i> Remember me
      </label>
    </div>
  </fieldset>