ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | HTML Input エレメント | — | |
| 2 | Value | ユーザーからの入力を受けるエディタブルな要素 | — | |
| 3 | Icon | アイコン要素 | Icon | 任意 |
Options: 選択肢
Size
sm
通常よりも小さなサイズです。限られたスペースにフィールドを配置する場合かつ入力の重要性が低い場合に使用します。
md (default)
インプットテキストのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのフィールドはノーマルを基準に重要度に応じて使用します。
lg
大きなインプットテキストは入力の重要性を高めるため、使用は極力控えてください。
Trigger
Trigger
入力に伴うアクションを実行するためのトリガーとなる要素です。
入力を補完するためのポップアップウィンドウを表示するためのトリガーや、入力内容のコピーを行うためのトリガーなどを挿入することができます。
States: 状態
Enable
ユーザーが操作する前のデフォルトの状態。
Hover
ユーザーがフィールドにマウスオーバーしている状態。
Focus
フィールドが操作可能な状態。キャレットが表示され、編集が可能であることがユーザーに伝達されます。
Disabled
システムによってフィールドが非活性化されている状態。ユーザーによる操作は不能です。
Invalid
Enable
入力内容が特定のフォーマット (メールアドレス、クレジットカード番号、パスワード要件など) に準拠していない場合の状態です。
ユーザーが適切な入力を行うことで無効状態は解除されます。
Hover
ユーザーがフィールドにマウスオーバーしている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Focus
フォーカスされている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Disabled
システムによってフィールドが非活性化されている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Behaviors: 振る舞い
最小幅
テキストフィールドの最小幅は、テキスト入力エリアが、フィールドの高さの2倍を担保するように設定します。このとき、テキスト入力エリアには、トリガーのエリアを含みません。
この最小幅によって、小さなテキストフィールドが読みやすくなるほか、タッチデバイスでも選択しやすくなります。
テキストオーバーフロー
フィールド内のテキストが指定された横幅に対して長すぎて収まらない場合、テキストはオーバーフローで表示されて横スクロールで確認できます。
Metrics: 寸法
sm
- Vertical Resizing: Hug
- Horizontal Resizing: Fixed
- Container Height: 32px
- padding Vertical: 4px
- padding Horizontal: 4px
md
- Vertical Resizing: Hug
- Horizontal Resizing: Fixed
- Container Height: 40px
- padding Vertical: 4px
- padding Horizontal: 4px
lg
- Vertical Resizing: Hug
- Horizontal Resizing: Fixed
- Container Height: 48px
- padding Vertical: 4px
- padding Horizontal: 4px
Field
- Vertical Resizing: Hug
- Horizontal Resizing: Fill
- padding Horizontal: 8px
Usage: 使い方
Inputを使用する際はFormコンポーネントの用法に従ってください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/7/5 | 振る舞い・寸法をアップデート |
| 2025/1/10 | 初版を公開 |
