フォーム

フォームのデザインテンプレートです。

テキストフィールド

Text

* 注釈またはエラーメッセージ

HTML

<div class="form-group">
  <label>Text</label>
  <input name="" type="text" placeholder="placeholder">
  <p class="note active">* 注釈またはエラーメッセージ</p>
</div>

横並び

Text

* 注釈またはエラーメッセージ

Text

* 注釈またはエラーメッセージ

HTML

<div class="form-flex">
  <div class="form-group">
    <label>Text</label>
    <input name="" type="text" placeholder="placeholder">
    <p class="note active">* 注釈またはエラーメッセージ</p>
  </div>
  <div class="form-group">
    <label>Text</label>
    <input name="" type="text" placeholder="placeholder">
    <p class="note active">* 注釈またはエラーメッセージ</p>
  </div>
</div>

ラジオボタン

Radio

No1

No2

No3

* 注釈またはエラーメッセージ

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">* 注釈またはエラーメッセージ</p>
</div>

チェックボックス

Check box

No1

No2

No3

* 注釈またはエラーメッセージ

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">* 注釈またはエラーメッセージ</p>
</div>

スイッチボタン

Switch

No1

No2

No3

* 注釈またはエラーメッセージ

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">* 注釈またはエラーメッセージ</p>
</div>

セレクトボックス

Select

* 注釈またはエラーメッセージ

HTML

<div class="form-group">
  <label>Select</label>
  <select>
    <option value="">選択してください</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <p class="note active">* 注釈またはエラーメッセージ</p>
</div>

テキストエリア

Textarea

* 注釈またはエラーメッセージ

HTML

<div class="form-group">
  <label>Textarea</label>
  <textarea placeholder="placeholder"></textarea>
  <p class="note active">* 注釈またはエラーメッセージ</p>
</div>

インストール

npm

コンソール

> npm i @noknow/web-design-form

インポート

CSS

@import '/YOUR_PROJECT/node_modules/@noknow/web-design-form/style.css';