テキストフィールド
角の立った入力欄です。フォーカスすると枠とリングが spark の赤になります。ヒントは何を書けばよいかを、エラーは次に何をすればよいかを、赤い枠だけでなく言葉でも伝えます。
メールアドレスニュースレターにだけ使います。
プロパティ
コード
import { Field, TextField } from "@/components/ui/kit/forms";
<Field label="メールアドレス" hint="ニュースレターにだけ使います。">
<TextField placeholder="name@example.com" />
</Field>すべての状態
Field · 通常
メールアドレスニュースレターにだけ使います。
TextField · エラー
メールアドレスドメインが足りません。name@example.com のように入力してください。
TextField · 無効
TextField caret
›
使い方
使っているトークン
| --paper | … |
|---|---|
| --line-control | … |
| --spark | … |
| --spark-ink | … |
| --ink | … |
| --faint | … |
| --font-body | … |
| --font-label | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。
仕様
- きっかけ
- 動きを減らす設定