Input Group

入力欄の前後にアイコン・単位テキスト・ボタンなどのアドオンを組み合わせて、ひとつの入力部品として見せるコンポーネントです。InputGroupAddon の align で inline(左右)と block(上下)の配置を切り替えられます。ジョブアンテナでは求人検索のキーワード入力、希望年収の単位付き入力、企業へのメッセージ入力に使います。

基本

アイコン・ボタン・テキストの各アドオンを inline-start / inline-end に配置した基本の3構成です。

求人検索

検索ボックスです。inline-start に検索アイコンを固定し、入力値があるときだけ inline-end にクリアボタンを表示します。

希望年収

検索条件の希望年収入力です。InputGroupText で単位「万円」を inline-end に添え、下限と上限を並べて範囲を指定します。

メッセージ入力

企業とのメッセージ送信フォームです。InputGroupTextarea に block-start の宛先、block-end の文字数上限と送信ボタンを組み合わせます。