Sass Customize
in order to edit the Form Controls you can use the css classes to overide the theme or you can edit it with sass src/scss/components/_forms.scss from the Source Files.
Form Theme
in order to apply the default tornado theme of the form it 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 value="">Option 01</option>
<option value="02">Option 02</option>
<option value="03">Option 03</option>
<option value="04">Option 04</option>
</select>
<!-- Textarea Input -->
<label>Textarea Label</label>
<textarea placeholder="text area example"></textarea>
</form>Advanced Select
Tornado provide a method to create an advanced select with search filter and multiple values select using Typescript and it applied by default for any select that has .form-control className or any select inside .form-ui container and you can simply use the method to create your own select from a html form select tag
//======> Import Form UI Methods <=======//
import Forms from './Base/Forms';
//=====> Advanced Select <=====//
Forms.advancedSelect('.form-control');
//===> Or With Global Tornado Object <===//
Tornado.forms.advancedSelect('.form-control');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 and 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>Check & Radio Buttons
tornado provide a multiple style formats for the checkboxes 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 label is the best one for this situation to Attache the click event to the label tag then you put your check/radio input and after it a span for the text look at the code below to see the themes and the structure.
<!-- 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 -->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 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-star">
<input type="text" placeholder="Control With icon">
</div>
<!-- Labeled Control Icon -->
<div class="control-icon labeled ti-briefcase">
<input type="text" placeholder="Labeled Control Icon">
</div>
<!-- Floating Control icon -->
<div class="control-icon floating-end ti-slack">
<input type="text" placeholder="Floating Control icon">
</div>Advanced Uploader
tornado ui provides an advanced file uploader that works with drag , drop and can preview media like images or videos and you can define the media preview size with data-size and value hd or square or you can set your custom size by giving the .advanced-uploader a width and height, and if you need to change the uploader icon give the .advanced-uploader an icon className from tornado icons.
<label>Drag and Drop Uploader</label>
<!-- Advanced Uploader -->
<div class="advanced-uploader" data-text="Drag and Drop your file to upload">
<input type="file">
</div>
<!-- // Advanced Uploader -->
<label>With Multiple</label>
<!-- Advanced Uploader -->
<div class="advanced-uploader">
<input type="file" data-text="Drag and Drop your files to upload" multiple>
</div>
<!-- // Advanced Uploader -->
<label>With HD Media</label>
<!-- Advanced Uploader -->
<div class="advanced-uploader ti-photo" data-text="Drag and Drop your Image/Video to upload" data-size="hd">
<input type="file">
</div>
<!-- // Advanced Uploader -->Form Repeater
tornado provide a nice form repeater that allow you to create and repeat form controls for multiple increased data submission you can easly know how to build a repeater with the code below and see it working in this example.
<!-- Form Repeater -->
<div class="form-repeater">
<label for="">Repeater Label</label>
<!-- Repeater Item -->
<div class="repeater-item">
<!-- Controls to Repeate -->
<div class="controls-wrap">
<!-- ... Controls to Repeat ... -->
</div>
<!-- Repeater Button -->
<a href="#" class="ti-plus add-item"></a>
</div>
<!-- // Repeater Item -->
</div>
<!-- // Form Repeater -->Form Rating Stars
tornado provide a interactive theme for rating vote control with as default stars icons you can look at the example below and its code to understand how to build one , and you can change the icon by adding data-icon=”iconClassName” attribute to the .rating-control element and you can set rating max value and the stars number with attribute max=”5″ to the input inside the .rating-control.
<!-- Form Rating Default -->
<div class="rating-control">
<input type="number" />
</div>
<!-- // Form Rating Default -->
<!-- Form Rating 10 Stars -->
<div class="rating-control">
<input type="number" max="10" />
</div>
<!-- // Form Rating 10 Stars -->