テキスト入力

Input

説明

ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。

標準的な枠線スタイル。フォーカス時にリングで強調するベーシックな実装。

薄い背景色で塗りつぶしたスタイル。Googleのマテリアルデザインに近い印象。

下線のみのミニマルスタイル。モダンなフォームデザインに使われる。

大きな角丸でやわらかい印象のスタイル。モバイルアプリやコンシューマー向けUIに。

入力時にラベルが上に移動するアニメーション付きスタイル。Materialデザインの代表的なパターン。

左側にアイコンを配置したスタイル。検索フィールドや入力タイプの視覚化に。

バリデーションエラー時の赤枠スタイル。エラーメッセージ付きのフォームバリデーション実装例。

検索専用スタイル。左に虫眼鏡アイコン・右にクリアボタン付きの一般的な検索欄。

Select

ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。

Checkbox

複数の選択肢からユーザーが任意の数を選択できるコンポーネント。グループで使用されることが多い。

Radio Button

複数の選択肢から1つだけ選択させる入力コンポーネント。グループで使用し、排他的な選択を表現する。

Date Picker

カレンダーUIを使って日付を入力・選択するコンポーネント。日付範囲の選択や和暦対応バリアントを持つ場合もある。