Search
Find
Form
Create and style a wide variety of forms
Checkbox
The redesigned checkbox element
Form field
A simple form container to group form sections
Input
The universal text input element
Label
Style your form labels
Radio button
The redesigned radio button element
Select
A basic dropdown selection element
Switch
A redesigned checkbox element that looks like a switch
Textarea
A multiline text input element
Form field
A simple form container to group form sections
All the different sections of the form should be contained in
fields. This way, every part of your form will be easily identifiable. Just create a div with the class siimple-field:
<div class="siimple-field"></div>
The
siimple-form-field class introduced in v3.0.0 to style your form fields elements is still supported, but will be removed in a future major release in favour of siimple-field.
Separate the different sections depending on their purpose with fields and add
labels (using the class siimple-field-label) and helpers (using the class siimple-field-helper) to them. You’ll end up with a clear and intuitive form that will provide a great user experience:
Your email
This field can’t be empty
Your comment
This field can’t be empty
<div class="siimple-field">
<div class="siimple-field-label">Your email</div>
<input type="text" class="siimple-input siimple-input--fluid" placeholder="[email protected]">
<div class="siimple-field-helper">This field can't be empty</div>
</div>
<div class="siimple-field">
<div class="siimple-field-label">Your comment</div>
<textarea class="siimple-textarea siimple-textarea--fluid"></textarea>
<div class="siimple-field-helper">This field can't be empty</div>
</div>
Found a mistake or want to help improve this documentation?
Suggest changes.