Forms
Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
Form input
<!-- 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
<!-- 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
<!-- 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
<!-- 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
<!-- 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 input checkboxes to true
.
Inline forms
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.
<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 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
Input groups
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, 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>
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.
<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>