Input

Basic

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

コンポーネントの基本的な使用方法です。

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

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

🔍

$ USD

jui-input — テキスト入力コンポーネント

ラベル、エラーメッセージ、prefix / suffix スロットに対応。

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

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

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

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

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

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

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

Built with StencilJS