Form and Input Example

Hii Sekai
July 20, 2018

Forms

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

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

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

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. 

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

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

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

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

Input

The name is valid.

Passwords must have at least 8 characters.

The Email address is unavailable.

Select

The option is invalid.

The option is available.

Checkbox, Radio and Switch (Error state only) 
<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>

Form disabled styles

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

Template

Download Now
Anas RAR
🌏 Web Developer
Contact