ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | HTML Textarea エレメント | — | |
| 2 | Value | ユーザーからの入力を受けるエディタブルな要素 | — | |
| 3 | Resize Handle | テキストエリアのサイズを調整するためのハンドル要素 | 任意 | |
| 4 | Counter | テキストエリアの文字数を表示する要素 | 任意 |
Options: 選択肢
Size
sm
通常よりも小さなサイズです。限られたスペースにフィールドを配置する場合かつ入力の重要性が低い場合に使用します。
md (default)
テキストエリアのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのフィールドはノーマルを基準に重要度に応じて使用します。
lg
大きなテキストエリアは入力の重要性を高めるため、使用は極力控えてください。
isResizeHandle
true(default)
テキストエリアのサイズを変更するためのリサイズハンドルを有効化するためのオプションです。
リサイズハンドルはテキストエリアのサイズが固定されている場合のみ有効となります。
false
テキストエリアのサイズを変更するためのリサイズハンドルを無効化するためのオプションです。
isCounter
true(default)
文字数を表示するためのオプションです。文字数制限がある場合、残りの文字数を表示することで、ユーザーがオーバーしてしまうのを防ぎます。
false
文字数を非表示にするためのオプションです。
States: 状態
Enable
ユーザーが操作する前のデフォルトの状態。
Hover
ユーザーがフィールドにマウスオーバーしている状態。
Focus
フィールドが操作可能な状態。キャレットが表示され、編集が可能であることがユーザーに伝達されます。
Disabled
システムによってフィールドが非活性化されている状態。ユーザーによる操作は不能です。
Invalid
Enable
入力内容が特定のフォーマット (文字数制限など) に準拠していない場合の状態です。
ユーザーが適切な入力を行うことで無効状態は解除されます。
Hover
ユーザーがフィールドにマウスオーバーしている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Focus
フォーカスされている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Disabled
システムによってフィールドが非活性化されている場合かつ、入力内容が特定の条件やフォーマットに準拠していない場合の状態です。
Behaviors: 振る舞い
テキストオーバーフロー
フィールド内のテキストが指定された縦幅に対して長すぎて収まらない場合、テキストはクリップ形式で表示されます。
テキストのクリップはスタイルプリセット (text-overflow: clip) を使用して視覚的にのみ実行されます。
Metrics: 寸法
sm
- Vertical Resizing: Fixed
- Horizontal Resizing: Fixed
- Container Height: 80px
- Item Spacing: 4px
- padding Vertical: 4px
- padding Horizontal: 8px
md
- Vertical Resizing: Fixed
- Horizontal Resizing: Fixed
- Container Height: 80px
- Item Spacing: 4px
- padding Vertical: 4px
- padding Horizontal: 12px
lg
- Vertical Resizing: Fixed
- Horizontal Resizing: Fixed
- Container Height: 80px
- Item Spacing: 4px
- padding Vertical: 4px
- padding Horizontal: 16px
Usage: 使い方
Textareaを使用する際はFormコンポーネントの用法に従ってください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/1/10 | 初版を公開 |
