SearchInput
検索欄のためのコンポーネントです。prefixは検索アイコン「FaMagnifyingGlassIcon 虫眼鏡のアイコン」に固定されています。
よくあるテーブルのオブジェクトの検索などに使用します。
使用上の注意
tooltipMessageで入力内容を補足する
tooltipMessageを使用して入力内容に対する説明を補足してください。
Props
placeholder非推奨
string
@deprecated placeholder属性は非推奨です。別途ヒント用要素を設置するか、それらの領域を確保出来ない場合はTooltipコンポーネントの利用を検討してください。
type
string
input 要素の type 値
width
string number
コンポーネントの幅
autoFocus
false true
オートフォーカスを行うかどうか
error
false true
フォームにエラーがあるかどうか
suffix
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
コンポーネント内の末尾に表示する内容
bgColor
"BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"
背景色。readOnly を下地の上に載せる場合に使う
tooltipMessage必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
入力欄の説明を紐付けるツールチップに表示するメッセージ