Search Input

検索キーワードの入力に特化したフォームコンポーネントです。検索アイコンやクリアボタンを内蔵しています。

Basic

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

WAI-ARIA:
- 内部でネイティブの <input type="search"> 要素を使用しており、検索入力のセマンティクスが保証されます。
- search-label プロパティで aria-label を設定でき、ラベルがない場合でもスクリーンリーダーに用途を伝えられます（デフォルト: 'Search'）。
- クリアボタンには clear-label プロパティで aria-label が設定され（デフォルト: 'クリア'）、支援技術からボタンの役割を認識できます。
キーボードナビゲーション:
- Escape キーで入力値をクリアできます。
- Tab キーで入力フィールドへのフォーカス移動が可能です。
- クリアボタンもキーボードでフォーカス・操作可能です。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-border, --jui-color-text, --jui-radius-md, --jui-transition-fast 等）を参照してスタイルが適用されます。

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

機能	用途	Chrome	Firefox	Safari	ステータス
`:focus-within`	フォーカス時のスタイル変更	60+	52+	10.1+	Baseline 2017
`::slotted()`	Shadow DOM スロットスタイル	53+	63+	10+	Baseline 2018
CSS Custom Properties	デザイントークン	49+	31+	9.1+	Baseline 2016
`prefers-reduced-motion`	アニメーション抑制	74+	63+	10.1+	Baseline 2020

💡 いずれの機能も Baseline 2020 以前に到達しており、主要ブラウザで広く対応済みです。

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

Property	Attribute	Description	Type	Default
`clearLabel`	`clear-label`	クリアボタンの aria-label	`string`	`'クリア'`
`debounce`	`debounce`	デバウンス遅延（ms）	`number`	`300`
`disabled`	`disabled`	無効状態	`boolean`	`false`
`loading`	`loading`	ローディング状態	`boolean`	`false`
`name`	`name`	フォーム識別用の name 属性	`string`	`undefined`
`placeholder`	`placeholder`	プレースホルダー	`string`	`'Search...'`
`searchLabel`	`search-label`	aria-label（i18n対応）	`string`	`'Search'`
`size`	`size`	サイズ	`"lg" \| "md" \| "sm"`	`'md'`
`value`	`value`	入力値	`string`	`''`

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

Event	Description	Type
`juiClear`	クリアボタン押下時	`CustomEvent<{ previousValue: string; }>`
`juiSearch`	デバウンス後に発火	`CustomEvent<{ value: string; }>`

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

Built with StencilJS