Input

一行のテキストを入力・編集するための標準フィールド。顧客属性、検索、件名入力などの構造化データを扱う。

プレビュー(動作デモ)

実際に文字を入力できます。フォーカス時のボーダー強調、メールアドレスの形式バリデーションを確認できます。

氏名

入力値: (空)

検索

入力値: (空)

メールアドレス (バリデーション)

メールアドレスを入力してください

サイズ

Button の縦幅と揃えた 2 サイズ。S (32px) は card 等の密度が高い領域、M (40px) はモーダル等の通常領域に使用。

S (32px)

M (40px)

横幅

横幅は入力内容の最大文字数に応じて決める。固定の variant は持たず、用途ごとの幅の目安を以下に示す。

用途	幅の目安
電話番号 / 数値 ID	160px
メール / 会社名	320px
URL / 件名	480px
住所 / 自由記述	親要素いっぱい (100%)

表にない用途は近い行に合わせる。表よりも内容が大幅に長い場合は親要素いっぱいに広げる。

状態

Normal / Focus / Danger / Disabled の 4 状態。Focus はブラウザ上で入力欄をクリック / Tab すると確認できます (枠線が太くなり青色に)。

Normal

Focus

Danger

Disabled

ラベル付き

label プロップを渡すと、入力欄の左上にラベルテキストが配置されます (font 14px / medium / 入力欄との gap 4px)。<label> 要素が <input> をラップする構造になるので htmlFor なしで自動的に紐づき、ラベルクリックでフォーカスします。

ラベルテキスト

ステータスラベル

statusLabel プロップにラベルの右に必須・任意バッジが表示されます。"required" / "optional" の文字列ショートハンドを使うのが基本です。label がない場合は無視されます。

必須

顧客名必須

任意

メモ任意

アイコン付き

leftIcon でフィールド左端にアイコンを表示。検索フィールドなどで使用します。

import { Input } from "@/components/Input";

<div style={{ width: "320px" }}>
  <Input
    inputHeight="m"
    fluid
    placeholder="テキストを入力"
  />
</div>

仕様

縦幅 (inputHeight)

S: height 32px / 左右 padding 8px / font 14px(Button S と同寸)
M: height 40px / 左右 padding 12px / font 16px(Button M と同寸、推奨デフォルト)
上下 padding は 8px 固定、focus 時のみ border 太化に合わせて -1px 補正

アイコン

icon size: S=16px / M=20px
icon と入力テキストの gap: S=4px / M=8px
left-icon は --input-padding-side ベースで自動配置(height 切替で icon size / gap も連動)

状態

Normal: bg 白 / border #D1D5DB 1px
Focus: border #0066CC 2px(padding -1px 補正でコンテンツ位置を維持)
Error: border #E01E5A 1px。error プロップ指定で aria-invalid="true" も自動付与
Disabled: bg #F5F7FA / text disabled

利用基準

使うべき時

一行で完結する構造化データ(氏名・電話番号・メール等)の入力
検索フィールドなどキーワードによる絞り込み
<label> と紐付けて入力対象を明示する
形式チェックが必要な場合は error プロップとフィールド直下のメッセージで即時フィードバック

使わない時

複数行入力 → Text Area を使用
パスワードなど機密情報 → Password Input を使用
選択肢が決まっている → Select / Combobox を使用

Figma

Figma で Input コンポーネントを開く ↗