入力欄InputBeta
フォームの入力フィールド、または入力欄風のコンポーネントを表示します。
プレビュー
状態とバリエーション
ラベル付き
アクセシブルにする最小構成です。ラベルと入力欄の ID を紐づけます。
文字数カウント
showCount を付けると文字数を表示します。SEO の meta title/description など上限のある入力に。maxLength と併用で count / max 形式に。
バリデーションエラー
エラー状態を付与すると、入力欄の輪郭が警告色になります。エラーメッセージは入力欄の直下に置きます。
無効化
編集できない時の状態です。理由はフィールド上のツールチップと補助テキストで補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| label | ReactNode | - | コントロール上部に表示し htmlFor で関連付けるラベルです（Select / Textarea と同様）。 |
| description | ReactNode | - | コントロール下の補助テキストです。aria-describedby で関連付きます。 |
| showCount | boolean | false | コントロール下に文字数を表示します。maxLength と併用すると count / max 形式になり、aria-describedby で関連付きます。 |
| type | string | - | テキスト、メールアドレス、パスワードなど、入力欄の種類を指定します。 |
| placeholder | string | - | 未入力時に入力欄内へ表示する補助テキストです。 |
| disabled | boolean | - | 入力できない状態にします。 |
| className | string | - | Input はデフォルトで親幅いっぱいに広がります。幅は FormGroup や外側の max-w-* で制約します。 |
使い方
import { FormControl, FormDescription, FormGroup, FormLabel, Input } from "@gunjo/ui"
export function LoginInput() {
return (
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="email">メールアドレス</FormLabel>
<FormControl>
<Input type="email" id="email" placeholder="name@example.com" />
</FormControl>
<FormDescription>アカウントに紐づくメールアドレスを入力します。</FormDescription>
</FormGroup>
)
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。