DDS

インプット

Figmaに定義済み

コード例

テキストインプット

基本的なテキスト入力フィールド

Open in StackBlitz

テキストエリア

複数行のテキスト入力

0 / 100
Open in StackBlitz

ファイルアップロード

ドラッグ&ドロップ対応のファイルアップロード

ここに画像をドラッグするか、
ファイルをアップロードしてください

Open in StackBlitz

サーチボックス

検索用のインプット

Open in StackBlitz

インプットエリア

テキスト入力フィールドの各状態

Default
Default : hover
Default : focus
Error

*エラーテキストが入ります。

Error : focus

*エラーテキストが入ります。

Disabled

サポートテキスト

テキストエリア

XXXXXXX

Default
0 / 100
Default : hover
0 / 100
Default : focus
0 / 100
Error
*エラーテキストが入ります。101 / 100
Error : focus
*エラーテキストが入ります。101 / 100
Disabled
0 / 100

サポートテキスト

0 / 100
0 / 100101 / 100

ファイルアップロード

XXXXXXX

ここに画像をドラッグするか、
ファイルをアップロードしてください

IMG
xxx-xxxx.jpg

サーチボックス

XXXXXXX

Default
Default : hover
Default : focus