Inputs
Any information from a user is taken as an input. These components help with a user's interaction
with the website. Below are the types of inputs available.
Text box
A textbox can be used for multi-line input. Use the class
You may keep the default shape or use class
Use class
textbox to use this component.
You may keep the default shape or use class
textbox-curved for
curved corners.
Use class
resize if you wish to keep the resizing of the text
box on. By default it is set to
non-resizable.
Labelled Inputs
Labelled Input has a label to the input field. Use the class
labelled-input in the
parent container. label-left positions the label to the left of
the input box and label-top
positions the label at the top of the input box.
Validation Inputs
The below input styles can be used to validate the user input and display messages accordingly.
Use the class
Use the class
val-success, val-warn or val-error for
success message, warning or error message
respectively in the parent container.
Username set successfully.
10 characters remaining.
Incorrect password. 2 attempts remaining.
Incorrect password. 2 attempts remaining.
Radio Buttons
Radio buttons help the user select one out of the many options at once. Use the class
radio-btn in the container.
Checkboxes
Checkboxes are used to select multiple options at once. Use the class
checkbox-btn in the container.