Input field
To render an input field, create a container which will hold the label and the input using a div with class .form-input. By default, it will take the whole width you can utilize the grid columns here to reduce the width.
<div class="form-input">
<label for="name">Name</label>
<input id="name" type="text" placeholder="Prathamesh Koshti" value="Prathamesh Koshti" />
</div>Copy
Similarly, you can create password field, email field, search field, URL field, tel field and number fields, select field and text area.
To create checkboxes wrap the checkbox and the label inside a div having class as .form-checkbox.
<div class="form-checkbox">
<input id="accept-checkbox" type="checkbox" checked />
<label for="accept-checkbox">I accept the terms and conditions</label>
</div>Copy
Similarly to the above example, you can create a radio button by using the class .form-radio.
<div class="form-radio">
<input id="one" name="size" type="radio" checked />
<label for="one">One</label>
</div>
<div class="form-radio">
<input id="two" name="size" type="radio" />
<label for="two">Two</label>
</div>Copy