Skip to main content
Designkufu

smarthr-ui-search-input

SearchInputは、検索キーワードを入力させるためのコンポーネントです。検索フォームで検索語句を入力させるときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-search-input
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-search-input/SKILL.md -o .claude/skills/smarthr-ui-search-input.md

Drops the SKILL.md into .claude/skills/smarthr-ui-search-input.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

検索キーワードを入力させるためのコンポーネントです。検索フォームで検索語句を入力させるときに使います。

よくあるテーブルのオブジェクトの検索（https://smarthr.design/products/design-patterns/smarthr-table/#h4-4）などに使用します。 prefixは検索アイコン「」に固定されています。

import

import { SearchInput } from 'smarthr-ui'

Props

Props 名 型 デフォルト値 必須 説明
placeholder string - - @deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。
type string - - input 要素の type 値
width string | number - - コンポーネントの幅
autoFocus boolean - - オートフォーカスを行うかどうか
error boolean - - フォームにエラーがあるかどうか
suffix ReactNode - - コンポーネント内の末尾に表示する内容
bgColor "BACKGROUND" | "COLUMN" | "BASE_GREY" | "OVER_BACKGROUND" | "HEAD" | "BORDER" | "ACTION_BACKGROUND" - - 背景色。readOnly を下地の上に載せる場合に使う
tooltipMessage ReactNode - ✓ 入力欄の説明を紐付けるツールチップに表示するメッセージ

実装ルール

SearchInput に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

使い方チェックリスト

使用上の注意 > tooltipMessageで入力内容を補足する

  • [must] tooltipMessage を使用して入力内容に対する説明を補足する