Input

テキスト入力を受け付ける基本的なフォームコンポーネントです。ユーザー名やメールアドレスなど、自由記述の入力に使用します。

Basic

jui-input の最も基本的な使用例です。

input-type プロパティを使用して、パスワードや数値など入力タイプを切り替えられます。

disabled などのプロパティを使用してコンポーネントの状態（非活性など）を制御します。

スロットなどを利用して、アイコン付きのパターンを作成できます。

🔍

$ USD

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`:focus-within`	フォーカス状態	全ver	全ver	全ver	Baseline
`:user-valid` / `:user-invalid`	バリデーション表示	119+	88+	16.5+	Baseline Widely Available
`color-mix()`	カラー生成	111+	113+	16.4+	Baseline 2023

💡 すべての機能が Baseline Widely Available に達しており、幅広いブラウザで安定して動作します。

WAI-ARIA:
- 内部でネイティブの <input> 要素が生成され、inputType（text / email / password / number / tel / url）に応じた標準的な入力セマンティクスが保証されます。
- label Prop を指定すると <label> 要素が描画され、htmlFor でネイティブ <input> と関連付けられます。
- required 指定時は <input> に required 属性と aria-required="true" が付与されます。ラベル横の必須マーク * は装飾のため aria-hidden="true" です。
- errorMessage 指定時は <input> に aria-invalid="true" が付与され、aria-describedby でエラーメッセージ要素（role="alert"）と関連付けられます。これによりエラー内容が支援技術に通知されます。
- name / value はフォーム送信に用いられます（formAssociated によりネイティブフォームへ参加します）。maxlength / autocomplete 属性もネイティブ <input> にそのまま反映されます。
キーボードナビゲーション:
- ネイティブの <input> を使用しているため、Tab でフォーカスでき、通常のテキスト入力・編集操作がそのまま利用できます。
- disabled の時はネイティブ <input> に disabled 属性が付与され、フォーカス順および操作の対象から除外されます。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`autocomplete`	`autocomplete`	オートコンプリート属性	`string`	`undefined`
`disabled`	`disabled`	無効状態	`boolean`	`false`
`errorMessage`	`error-message`	エラーメッセージ（表示すると invalid 状態になる）	`string`	`undefined`
`inputType`	`input-type`	入力タイプ	`"email" \| "number" \| "password" \| "tel" \| "text" \| "url"`	`'text'`
`label`	`label`	ラベルテキスト	`string`	`undefined`
`maxlength`	`maxlength`	最大文字数	`number`	`undefined`
`name`	`name`	フォーム送信時の name 属性	`string`	`undefined`
`placeholder`	`placeholder`	プレースホルダー	`string`	`''`
`required`	`required`	必須フラグ	`boolean`	`false`
`value`	`value`	入力値（双方向バインディング用）	`string`	`''`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	変更確定時に発火（value を emit）	`CustomEvent<{ value: string; }>`
`juiInput`	入力中にリアルタイムで発火（value を emit）	`CustomEvent<{ value: string; }>`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
`"prefix"`	入力フィールド前のアイコン等
`"suffix"`	入力フィールド後のアイコン等

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS