Search Bar - Keep React

The Search Bar component provides a user interface element for entering search queries. It includes various customization options such as placeholder text, color variants, size variations, icons, and additional content. The component can be configured with search input addons and icons, along with their respective positions.

Default SearchBar#

The Default Search Bar component provides a simple and intuitive user interface element for entering search queries.

SearchBar With Icon#

The Search Bar component with an icon allows you to enhance the visual appeal and functionality of the search input field. By adding an icon through the icon prop.

SearchBar With Color Variant#

The Search Bar component can be customized with different color variants to match your design aesthetics. You can choose from a range of available colors, including "gray" "info" "error" "warning" and "success".

Disabled SearchBar#

The Search Bar component can be disabled using the disabled prop. When you set the disabled prop to true, the search input field becomes non-editable and the user cannot interact with it.

API Reference#

Explore the available props for the search bar component

Property	Description	Type	Default
placeholder	Placeholder text for the search input.	string	search anything
color	Specifies the color variant of the search input component.	gray info error warning success	gray
size	Sets the size of the search input component.	sm md lg	lg
addon	Additional content or components added as a search input addon.	ReactNode	ICON
icon	Icon displayed within the search input component.	ReactNode	ICON
addonPosition	Specifies the position of the search input addon.	left right	right
iconPosition	Specifies the position of the icon within the search input.	left right	right
handleOnChange	Callback function when the search input value changes.	function	(e) => void
children	Child components and content to be placed within the search input component.	ReactNode	Search Result
disabled	Disables interactions with the search input component.	boolean	false
bordered	Displays a border around the search input component.	boolean	false
withBg	Applies a background style to the search input component.	boolean	false