Form Controls
Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.
Sass Customize
in order to edit the Form Controls you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/forms/_form-themes.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Default Form Theme
in order to apply the default tornado theme of the form its works simply by adding class form-ui to the form tag or any other tag that represent the form controls Container and also you can apply the style to control tag without the parent class by adding the class form-control to the control tag it self.
<form class="form-ui">
<!-- Text Input -->
<label>Text Type Label</label>
<input type="text" placeholder="Text Type Example">
<!-- Email Input -->
<label>Email Type Label</label>
<input type="email" placeholder="Email Type Example">
<!-- Password Input -->
<label>Password Type Label</label>
<input type="password" placeholder="Password Type Example">
<!-- Select Tag -->
<label>Select Tag Label</label>
<select>
<option> select example </option>
</select>
<!-- Chevron Select -->
<select class="chevron-select">
<option> chevron select example </option>
</select>
<!-- Textarea Input -->
<label>Textarea Label</label>
<textarea placeholder="text area example"></textarea>
</form>
Standard File Upload Control
in order to use the Tornado Standard File Control simply put your file input inside a wrapper tag and give it a class Name file-input and for the placeholder text you can use the attribute data-text and for the button text use the attribute data-btn for changing the text thats it now you got file upload with input theme.
<!-- Standard Uploader -->
<div class="file-input" data-text="File Upload" data-btn="Browse">
<input type="file">
</div>
<!-- // Standard Uploader -->
Checkbox's and Radio Buttons
tornado provide a multiple style formats for the checkbox's and radio buttons and in order to use a controls of the type checkbox or radio first you create a label element and you can use any other html tags but the label is the best one for this Situation because the click event on the label tag will make the input inside of it checked/unchecked after creating the label give it a class checkbox for standard checkbox style or the class radio-button then create the checkbox/radio button control tag inside if that label and after the control tag create a another tag a span for example thats it and for the other skins of the checkbox's you can see the example below.
<!-- Checkbox Skin -->
<label class="checkbox">
<input type="checkbox" name="checkbox">
<span>Checkbox Label</span>
</label>
<!-- // Checkbox Skin -->
<!-- Radio Skin -->
<label class="radio-button">
<input type="radio" name="radio-button">
<span>Radio Button Label</span>
</label>
<!-- // Radio Skin -->
<!-- Switch button Skin -->
<label class="switch-control">
<input type="checkbox" name="switch-button">
Switch Off/ON
<span class="switch"></span>
</label>
<!-- // Switch button Skin -->
Validation Status
in order to apply validation events theme on the controls you can do that by adding class to the form control and also to label elements a class of the event name and what we have here is 4 status success,error,warning,disable watch the example below.
<!-- Success Status -->
<label class="success">Success Status Label</label>
<input type="text" placeholder="Success Example" class="success">
<!-- Warning Status -->
<label class="warning">Warning Status Label</label>
<input type="email" placeholder="Warning Example" class="warning">
<!-- Error Status -->
<label class="error">Error Status Label</label>
<input type="password" placeholder="Error Example" class="error">
<!-- Disable Status -->
<label class="disable">Disable Status Label</label>
<input type="password" placeholder="Disable Example" class="disable" disabled>
Validation Status Messages
in order to give a good ux experince there is many ways to show the controls status messages number one is under the control messages and you can do that simply create a new html tag after the control element and give it the class control-hint and number tow you can use the badges by putin it after the control tag you will see those tow examples in the code below and also you can use alerts components to do the same
<!-- Success Status -->
<label class="success">Success Status Label</label>
<input type="text" placeholder="Success Message Example" class="success">
<!-- Message Hint -->
<p class="control-hint success">an example of the control status message with success color</p>
<!-- Error Status -->
<label class="error">Error Status Label</label>
<input type="email" placeholder="Error Message Example" class="error">
<!-- Message Badge -->
<span class="badge danger outline dismiss pointing-top">control status message with badge.. <i class="ti-close remove-item"></i></span>
Controls With Icons
in order to make a control with icon beside its value/placholder or with icon first thing to do is to create a container for the form control and add to it a class name control-icon then add to it the icon class name [icons cheatsheet] ,, and for the labeled theme add to the control icon element a class name labeled and if you want to reverse the position of the icon add class name floating-end.
<!-- Control With icon -->
<div class="control-icon ti-businessman-worker">
<label>Control With icon</label>
<input type="text" placeholder="Control With icon">
</div>
<!-- Labeled Control Icon -->
<div class="control-icon labeled ti-electro-head-1">
<label>Email Type Label</label>
<input type="text" placeholder="Labeled Control Icon">
</div>
<!-- Floating Control icon -->
<div class="control-icon floating-end ti-slack">
<label>Password Type Label</label>
<input type="text" placeholder="Floating Control icon">
</div>
Form Lined Theme
there is one more skin for the controler that is one line at the botom of the controls and you can use this simply by adding a class name lined to the controls wrapper form-ui and if you want a cool animated effect use label tag after the control and do not use placeholder attribute see the code example below.
<form class="form-ui row lined">
<!-- Control Wrapper For Grid -->
<div class="col-12 col-l-6 col-xl-4">
<!-- Text Input -->
<input type="text">
<label>Text Type Label</label>
</div>
<!-- Control Wrapper For Grid -->
<div class="col-12 col-l-6 col-xl-4">
<!-- Error Status -->
<input type="password" class="error">
<label class="error">Error Status Label</label>
</div>
<!-- Control Wrapper For Grid -->
<div class="col-12 col-l-6 col-xl-4">
<!-- Floating Control icon -->
<div class="control-icon floating-end ti-slack">
<input type="text">
<label>Floating Control icon</label>
</div>
</div>
<!-- Controls Wrapper For Grid -->
<div class="col-12 col-l-6 col-xl-4">
<!-- Disable Status -->
<input type="password" class="disable" disabled>
<label class="disable">Disable Status Label</label>
</div>
<!-- Controls Wrapper For Grid -->
<div class="col-12 col-l-6 col-xl-4">
<!-- Chevron Select -->
<select class="chevron-select">
<option> chevron select example </option>
</select>
</div>
<!-- Controls Wrapper For Grid -->
<div class="col-12 col-l-6 col-xl-4">
<!-- Floating Control icon -->
<div class="control-icon ti-slack">
<input type="text">
<label>Control icon</label>
</div>
</div>
<!-- Control Wrapper For Grid -->
<div class="col-12">
<textarea></textarea>
<!-- Textarea Input -->
<label>Textarea Label</label>
</div>
</form>