Forms - Elements - Spectre.css CSS Framework
Author: Yan Zhu
Description: Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Forms#

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

#### Form input#

Name
Email

    <!-- 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>

#### Form textarea#

Message

    <!-- 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>

#### Form select#

    <!-- 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>

#### Form radio#

Gender Male Female

    <!-- 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>

#### Form switch#

Send me emails with news and tips
Send me emails with news and tips

    <!-- 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>

#### Form checkbox#

Remember me
Remember me

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

Select all

You can change checkbox to indeterminate state by setting the `indeterminate` property of input checkboxes to `true`.

#### Inline forms#

Male Female
Checkbox 1 Checkbox 2

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

    <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.

Name
Email
Gender
Male Female
Source
Send me emails with news and tips
Message
Remember me

    <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>

#### Form 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.

Label
Label

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

#### Form 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>.

    <!-- 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.

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

#### Input types#

Email
URL
Search
Tel
Password
Number
Date
Color
File

#### Input 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.

    <!-- 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>

#### Form validation styles#

Input
Name

The name is valid.

Password

Passwords must have at least 8 characters.

Select

The option is invalid.

The option is available.

Checkbox, Radio and Switch (Error state only)
I'm not a robot.
Male Female
Send me emails with news and tips

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.

    <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>

Email
Password

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

    <!-- 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,}$">

#### Form disabled styles#

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

Name
Gender Male Female
Send me emails with news and tips
Message
Remember me

    <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>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.