Form

This is a form design template.

Text field

<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

<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

<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

<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>

Switch

No1

No2

No3

* 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

Select Select item 1 2 3

* 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

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';