Form
This is a form design template.
Text field
* Here is a notification such as error message
HTML
<div class="form-group"> <label>Text</label> <input name="" type="text" placeholder="placeholder"> <p class="note active">* Here is a notification such as error message</p> </div>
Horizontal
* Here is a notification such as error message
* Here is a notification such as error message
HTML
<div class="form-flex"> <div class="form-group"> <label>Text</label> <input name="" type="text" placeholder="placeholder"> <p class="note active">* Here is a notification such as error message</p> </div> <div class="form-group"> <label>Text</label> <input name="" type="text" placeholder="placeholder"> <p class="note active">* Here is a notification such as error message</p> </div> </div>
Radio button
* Here is a notification such as error message
HTML
<div class="form-group"> <label>Radio</label> <div class="form-group-check"> <div class="form-group-check-item"> <label>No1</label> <input name="radio" type="radio" value="1"> </div> <div class="form-group-check-item"> <label>No2</label> <input name="radio" type="radio" value="2"> </div> <div class="form-group-check-item"> <label>No3</label> <input name="radio" type="radio" value="3"> </div> </div> <p class="note active">* Here is a notification such as error message</p> </div>
Check box
* Here is a notification such as error message
HTML
<div class="form-group"> <label>Check box</label> <div class="form-group-check"> <div class="form-group-check-item"> <input name="" type="checkbox" value="1"> <label>No1</label> </div> <div class="form-group-check-item"> <input name="" type="checkbox" value="2"> <label>No2</label> </div> <div class="form-group-check-item"> <input name="" type="checkbox" value="3"> <label>No3</label> </div> </div> <p class="note active">* Here is a notification such as error message</p> </div>
* Here is a notification such as error message
HTML
<div class="form-group">
<label>Switch</label>
<div class="form-group-check">
<div class="form-group-check-item">
<input class="switch" name="" type="checkbox" value="1">
<label>No1</label>
</div>
<div class="form-group-check-item">
<input class="switch" name="" type="checkbox" value="2">
<label>No2</label>
</div>
<div class="form-group-check-item">
<input class="switch" name="" type="checkbox" value="3">
<label>No3</label>
</div>
</div>
<p class="note active">* Here is a notification such as error message</p>
</div>
Select box
* Here is a notification such as error message
HTML
<div class="form-group">
<label>Select</label>
<select>
<option value="">Select item</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p class="note active">* Here is a notification such as error message</p>
</div>
Textarea
* Here is a notification such as error message
HTML
<div class="form-group">
<label>Textarea</label>
<textarea placeholder="placeholder"></textarea>
<p class="note active">* Here is a notification such as error message</p>
</div>
Install
npm
Console
> npm i @noknow/web-design-form
Import
CSS
@import '/YOUR_PROJECT/node_modules/@noknow/web-design-form/style.css';
* Here is a notification such as error message
HTML
<div class="form-group"> <label>Switch</label> <div class="form-group-check"> <div class="form-group-check-item"> <input class="switch" name="" type="checkbox" value="1"> <label>No1</label> </div> <div class="form-group-check-item"> <input class="switch" name="" type="checkbox" value="2"> <label>No2</label> </div> <div class="form-group-check-item"> <input class="switch" name="" type="checkbox" value="3"> <label>No3</label> </div> </div> <p class="note active">* Here is a notification such as error message</p> </div>
Select box
* Here is a notification such as error message
HTML
<div class="form-group"> <label>Select</label> <select> <option value="">Select item</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p class="note active">* Here is a notification such as error message</p> </div>
Textarea
* Here is a notification such as error message
HTML
<div class="form-group"> <label>Textarea</label> <textarea placeholder="placeholder"></textarea> <p class="note active">* Here is a notification such as error message</p> </div>
Install
npm
Console
> npm i @noknow/web-design-form
Import
CSS
@import '/YOUR_PROJECT/node_modules/@noknow/web-design-form/style.css';