テキストフィールド

プレーンテキストフィールド

#textField_basic

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control" placeholder="プレースホルダー">
</div>

テキストフィールドのサイズ

#textField_basic_hg

#textField_basic_lg

#textField_basic

#textField_basic_sm

<input type="text" class="form-control input-hg" placeholder="input-hg">
<input type="text" class="form-control input-lg" placeholder="input-lg">
<input type="text" class="form-control" placeholder="通常サイズ">
<input type="text" class="form-control input-sm" placeholder="input-sm">

アイコン付き

#textField_icon

例：チェックアイコン

#textField_icon_check

ラベル

<span class="input-icon">にて設置したいアイコンを指定します。
.form-groupに、コラムcol-*-*が指定されているとアイコンの位置がずれるので注意して下さい。

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <div class="input-with-icon">
    <input type="text" class="form-control" placeholder="プレースホルダー">
    <span class="input-icon icon-abui-check-inverted"></span>
  </div>
</div>

例：パスワードアイコン

#textField_icon_pw

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <div class="input-with-icon">
    <input type="password" class="form-control" placeholder="プレースホルダー">
    <span class="input-icon icon-abui-lock"></span>
  </div>
</div>

枠なし

#textField_flat

ラベル

inputに.flatを指定します。

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control flat" placeholder="プレースホルダー">
</div>

接頭、接尾付き

接頭付き

#textField_prefix

ラベル

.input-groupで<input>を囲み、<span class="input-group-addon">付けたいテキスト</span>をinputの前に追加します。

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input class="form-control" type="text" placeholder="プレースホルダー">
  </div>
</div>

接尾付き

#textField_suffix

ラベル

人

接尾付きの場合は、<span class="input-group-addon">付けたいテキスト</span>をinputの後に追加します。

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <div class="input-group">
    <input class="form-control" type="text" placeholder="プレースホルダー">
    <span class="input-group-addon">人</span>
  </div>
</div>

字数カウント付き

入力文字数に制限がある場合に、残り入力可能な字数をカウントダウンします。上限の文字数以上入力するとその場でエラーのスタイルに変化します。

#textField_count

ラベル

<input> タグに、input-count クラスを付与し、data-max 属性値に上限文字数を指定します。

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control input-count" data-max="20" placeholder="プレースホルダー">
</div>

サジェスト付き

#textField_suggest

ラベル

typeahead.jsプラグイン（ver.0.11.1）を利用しています。input要素に.input-typeaheadを追加、idを指定し、指定したidでtypeaheadを呼び出します。

<div class="form-group form-group-typeahead">
  <label><span class="label-text">ラベル</span></label>
  <div class="input-with-icon">
    <input type="text" class="form-control input-typeahead" id="typeahead起動用id" placeholder="newと入力してみてください">
    <span class="input-icon-typeahead icon-abui-pencil"></span>
  </div>
</div>

JavaScriptで選択肢を定義します。表示するサジェストの最大数などを、オプションで設定できます。データは、"local"パラメータに設定してください。その他オプションについては、typeahead.js公式ドキュメントを参照ください。

$('#typeahead起動用id').typeahead({
  hint: true,
  highlight: true,
  minLength: 1,
  limit: 3,
  // offset: false,
},
{
  name: 'states',
  source: abui.util.substringMatcher(["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut",
    "Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky",
    "Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri",
    "Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota",
    "North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina",
    "South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"
  ])
});

数字のフィールド

金額や数量など、数字を入力するテキストフィールドは、数字を右寄せにすることで縦に並べた場合に桁位置が揃い、情報を拾いやすくなります。とくに表組内の場合には効果的です。数字を右寄せにするには、inputに.text-rightをつけます。

#textField_right

ラベル

<div class="form-group">
  <label><span class="label-text">ラベル</span></label>
  <input type="text" class="form-control text-right" placeholder="0">
</div>

ワード検索

#textField_wordSearch

ラベル

<div class="input-group input-group-rounded">
  <span class="input-group-btn">
    <button type="submit" class="btn"><span class="icon-abui-search input-icon"></span></button>
  </span>
  <input type="text" class="form-control" placeholder="Search">
</div>