Form Parts

各種入力フォームに使用するコンポーネント群です。

Input

インプット

入力ボックスです。kk-inputを指定してください。
Class
kk-input インプットボックス
kk-input-field パーツ上部にマージンを設定します
kk-input-labelと合わせて使用します
kk-input-label パーツ上部にラベルを表示します
Attribute
size-s 小さいパーツ
size-l 大きいパーツ
fit 幅を100%ではなく、コンテンツに合わせる
invalid 不正状態表示
入力値が不正な場合の表示などにお使いください		 
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <input class="kk-input" type="text" value="abc123あいう" placeholder="Input">
    <label class="kk-input-label">default</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <input class="kk-input" size-s type="text" value="abc123あいう">
    <label class="kk-input-label">size-s</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <input class="kk-input" size-l type="text" value="abc123あいう">
    <label class="kk-input-label">size-l</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <input class="kk-input" type="text" value="" placeholder="入力/選択可" list="datalist">
    <datalist id="datalist">
      <option>123</option>
      <option>abc</option>
      <option>あいう</option>
    </datalist>
    <label class="kk-input-label">datalist</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <input class="kk-input" type="text" value="abc123あいう" placeholder="Input" maxlength="16" fit>
    <label class="kk-input-label">fit</label>
  </div>
</div>

Movable Label Input

ラベルが動くインプット

プレースホルダとラベルを兼用する動くラベルです。
kk-movable-labelを指定してください。
Class
kk-input-field パーツ上部にマージンを設定します
kk-input-labelと合わせて使用します
kk-input-label パーツ上部にラベルを表示します
kk-movable-label 未入力時はプレースホルダ、
入力時にはパーツ上部に移動しラベルとなります
Attribute 
<div class="kk-col6@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="input_m1" class="kk-input" type="text">
    <label class="kk-movable-label" for="input_m1">Movable Label</label>
  </div>
</div>
<div class="kk-col6@m kk-col12" cell>
  <div class="kk-input-field">
    <input id="input_m2" class="kk-input" type="text" value="Test">
    <label class="kk-movable-label" for="input_m2">動くラベル</label>
  </div>
</div>

Button

ボタン

ボタンです。kk-buttonを指定してください。
属性theme=を指定することで色違いのボタンを使用できます。
Class
kk-button ボタン
Attribute
size-s 小さいパーツ
size-l 大きいパーツ
fit 幅を100%ではなく、コンテンツに合わせる
theme="primary" Primaryの配色
theme="secondary" Secondaryの配色
theme="caution" Cautionの配色 
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button">Default</button>
    <label class="kk-input-label">default</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button kk-shadow">影付き</button>
    <label class="kk-input-label">kk-shadow</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button" theme="primary">Primary</button>
    <label class="kk-input-label">theme="primary"</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button" theme="secondary">Secondary</button>
    <label class="kk-input-label">theme="secondary"</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button" theme="caution">Caution</button>
    <label class="kk-input-label">theme="caution"</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button" theme="primary" size-s>小さいサイズ</button>
    <label class="kk-input-label">size-s</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button" theme="secondary" size-l>大きいサイズ</button>
    <label class="kk-input-label">size-l</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <button class="kk-button" theme="secondary" fit>文字列に合わせた横幅</button>
    <label class="kk-input-label">fit</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
<div class="kk-input-field">
  <a class="kk-button" theme="primary" href="#">Aタグボタン</a>
  <label class="kk-input-label">aタグ</label>
</div>
</div>
pan_tool Aタグボタン

Checkbox

チェックボックス

チェックボックスです。kk-checkboxを指定してください。
トグルスイッチデザインのものも用意しています。
Class
kk-checkbox チェックボックス
Attribute
size-s 小さいパーツ
size-l 大きいパーツ 
<div class="kk-col6 kk-margin-top-s">
  <input id="check1" class="kk-checkbox" type="checkbox">
  <label for="check1">CheckBox</label>
</div>
<div class="kk-col6 kk-margin-top-s">
  <input id="check3" class="kk-checkbox" type="checkbox" size-s>
  <label for="check3">size-s</label>
</div>
<div class="kk-col6 kk-margin-top-s">
  <input id="check4" class="kk-checkbox" type="checkbox" size-l>
  <label for="check4">size-l</label>
</div>

Radio Button

ラジオボタン

ラジオボタンです。kk-radioを指定してください。
Class
kk-radio ラジオボタン
Attribute
size-s 小さいパーツ
size-l 大きいパーツ 
<div class="kk-col6 kk-margin-top-s">
  <input id="radio1" name="radio" class="kk-radio" type="radio">
  <label for="radio1">Normal</label>
</div>
<div class="kk-col6 kk-margin-top-s">
  <input id="radio3" name="radio" class="kk-radio" type="radio" size-s>
  <label for="radio3">size-s</label>
</div>
<div class="kk-col6 kk-margin-top-s">
  <input id="radio4" name="radio" class="kk-radio" type="radio" size-l>
  <label for="radio4">size-l</label>
</div>

Textarea

テキストエリア

テキストエリアです。kk-textareaを指定してください。
Class
kk-textarea テキストエリア
kk-input-field パーツ上部にマージンを設定します
kk-input-labelと合わせて使用します
kk-input-label パーツ上部にラベルを表示します
Attribute
size-s 小さいパーツ
size-l 大きいパーツ 
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <textarea id="text1" class="kk-textarea" rows="3"></textarea>
    <label class="kk-input-label">default</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <textarea id="text1" class="kk-textarea" rows="3"></textarea>
    <label class="kk-movable-label">動くラベル</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <textarea class="kk-textarea" rows="3" placeholder="Textarea" size-s>小さいサイズ</textarea>
    <label class="kk-input-label">size-s</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <textarea class="kk-textarea" rows="3" placeholder="Textarea" size-l>大きいサイズ</textarea>
    <label class="kk-input-label">size-l</label>
  </div>
</div>

Select

選択リスト

選択リストです。kk-selectを指定してください。
Class
kk-select 選択リスト
kk-input-field パーツ上部にマージンを設定します
kk-input-labelと合わせて使用します
kk-input-label パーツ上部にラベルを表示します
Attribute
size-s 小さいパーツ
size-l 大きいパーツ 
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <select class="kk-select">
      <option value=”on”>ON</option>
      <option value=”off”>OFF</option>
    </select>
    <label class="kk-input-label">default</label>
  </div>
</div>
<div class="kk-col4@m kk-col6" cell>
  <div class="kk-input-field">
    <select class="kk-select" disabled>
      <option value=”on”>ON</option>
      <option value=”off”>OFF</option>
    </select>
    <label class="kk-input-label">disabled</label>
  </div>
</div>