検索バー

SearchBarコンポーネントは、ローディング状態、クリア機能、複数のバリアントをサポートする検索入力コンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• バリエーション: Default、Outlined、Filledの3種類
• サイズ: Small、Medium、Largeの3サイズ
• 状態管理: ローディング状態と無効化状態のサポート
• クリア機能: 入力内容をクリアするボタン
• イベント: 入力、フォーカス、検索イベントのサポート
• アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応
• テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

---
import { SearchBar } from '@karan-monorepo/ui-core';
---

<kds-search-bar
  placeholder="検索..."
  value=""
  size="md"
  variant="default"
  clearable="true"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
placeholder	string	"Search..."	検索入力のプレースホルダーテキスト
value	string	""	検索入力の現在の値
size	"sm" | "md" | "lg"	"md"	検索バーのサイズ
variant	"default" | "outlined" | "filled"	"default"	検索バーの視覚的バリエーション
disabled	boolean	false	検索バーを無効化するかどうか
loading	boolean	false	ローディング状態を表示するかどうか
clearable	boolean	true	クリアボタンを表示するかどうか
theme	"light" | "dark"	"light"	検索バーのカラーテーマ

使用例

SearchBar Component

Search bar component with various styles and interactive features.

Variants

Default

Outlined

Filled

Sizes

Small

Medium

Large

States

Normal

Disabled

With Value

Themes

Light Theme

Dark Theme

Usage Examples

Website Search

Product Search

Mobile Search

バリエーション

SearchBarコンポーネントは3つの視覚的バリエーションをサポートします：

• default: 標準的なボーダー付き検索バー
• outlined: 太いボーダーを使用する検索バー
• filled: 背景色付きの検索バー

<!-- デフォルトバリエーション -->
<kds-search-bar placeholder="デフォルト検索" variant="default" />

<!-- アウトラインバリエーション -->
<kds-search-bar placeholder="アウトライン検索" variant="outlined" />

<!-- フィルドバリエーション -->
<kds-search-bar placeholder="フィルド検索" variant="filled" />

サイズバリエーション

SearchBarコンポーネントは3つのサイズをサポートします：

• sm: 小さな検索バー（14px）
• md: 標準的な検索バー（16px）
• lg: 大きな検索バー（18px）

<!-- 小さな検索バー -->
<kds-search-bar placeholder="Small" size="sm" />

<!-- 大きな検索バー -->
<kds-search-bar placeholder="Large" size="lg" />

状態管理

SearchBarコンポーネントは様々な状態をサポートします：

ローディング状態

<kds-search-bar
  placeholder="検索中..."
  value="検索クエリ"
  loading="true"
  clearable="true"
/>

無効化状態

<kds-search-bar
  placeholder="無効化された検索"
  value="無効化された値"
  disabled="true"
/>

クリア機能なし

<kds-search-bar
  placeholder="クリア不可"
  value="クリアできない値"
  clearable="false"
/>

イベントハンドリング

SearchBarコンポーネントは以下のイベントを発火します：

// 検索バーのイベントリスナー
const searchBar = document.querySelector('kds-search-bar');

searchBar.addEventListener('input', (event) => {
  console.log('入力値:', event.detail.value);
});

searchBar.addEventListener('search', (event) => {
  console.log('検索実行:', event.detail.value);
});

searchBar.addEventListener('clear', () => {
  console.log('クリアボタンがクリックされました');
});

searchBar.addEventListener('focus', () => {
  console.log('検索バーにフォーカス');
});

searchBar.addEventListener('blur', () => {
  console.log('検索バーからフォーカスが外れました');
});

スタイリング

SearchBarコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

SearchBarコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの<input>要素を使用
• キーボードナビゲーションサポート（Enterキーで検索実行）
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応の構造
• 適切なARIA属性の設定

ベストプラクティス

1. プレースホルダーテキストは説明的にして、何を検索できるかを明確にする
2. ローディング状態を適切に表示してユーザーにフィードバックを提供する
3. クリア機能は必要に応じて使用し、UXを向上させる
4. 適切なサイズを選択してコンテキストに合った検索バーを作成する
5. 検索結果の表示と組み合わせて使用する
6. キーボードショートカット（Ctrl+Kなど）との統合を検討する
7. 両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

SearchBarコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Custom Properties
• Web Components (Lit)
• CSS Grid
• CSS Flexbox