フォーム

kitstrap2はテキスト入力、トグルスイッチ、ファイル入力、フォームグループなどのフォームコンポーネントを提供します。

テキストボックス

<input class="kit-textbox" type="text" placeholder="デフォルトテキストボックス">

テキストボックスのバリアント

<input class="kit-textbox -flat" type="text" placeholder="フラット">
<input class="kit-textbox -rounded" type="text" placeholder="角丸">

テキストボックスのサイズ

<input class="kit-textbox -small" type="text" placeholder="Small">
<input class="kit-textbox -medium" type="text" placeholder="Medium">
<input class="kit-textbox -large" type="text" placeholder="Large">

テキストエリア

<textarea class="kit-textbox" placeholder="テキストエリア"></textarea>

トグルスイッチ

オプション切替

<div class="kit-toggle">
  <span>オプション切替</span>
  <input type="checkbox" id="toggle1">
  <label for="toggle1"></label>
</div>

ファイル入力

ファイルを選択

<div class="kit-input-file">
  ファイルを選択
  <input type="file">
</div>

フォームグループ

テキストボックスとボタンを結合して使用できます。

<div class="kit-formgroup">
  <input class="kit-textbox" type="text" placeholder="検索...">
  <button class="kit-button -primary">検索</button>
</div>