SearchBox

The SearchBox component provides a UI element for entering search queries. It includes optional features like search icon, keyboard shortcuts, and custom content.

Usage

import { SearchBox } from '@harnessio/ui/components'

return (
  <SearchBox.Root
    placeholder="Search..."
    hasSearchIcon={true}
    hasShortcut={true}
    shortcutLetter="K"
    shortcutModifier="cmd"
    onSearch={() => handleSearch()}
    handleChange={e => onChange(e)}
    className="custom-class"
  />
)

## API Reference

### `Root`

The root component that provides search functionality.

```typescript jsx
<SearchBox.Root
  width="fixed"                       // [Optional] Width of the search box ('full' | 'fixed')
  hasShortcut={true}                  // [Optional] Show keyboard shortcut indicator
  hasSearchIcon={true}                // [Optional] Show search icon
  shortcutLetter="k"                  // [Optional] Keyboard shortcut key
  shortcutModifier="cmd"              // [Optional] Keyboard shortcut modifier ('cmd' | 'ctrl' | 'alt' | 'shift')
  textSize={TextSize['text-sm']}      // [Optional] Text size of the input
  onSearch={() => searchHandler()}    // [Optional] Callback when search is triggered
  onFocus={() => focusHandler()}      // [Optional] Callback when input is focused
  handleChange={e => handleChange(e)} // [Optional] Callback when input value changes
  showOnFocus={false}                 // [Optional] Trigger search on focus
  inputClassName="h-8"                // [Optional] Additional classes for the input
  placeholder="Search..."             // [Optional] Placeholder text
  value=""                            // [Optional] Controlled input value
  defaultValue=""                     // [Optional] Default input value
  theme="default"                     // [Optional] Theme variant
/>

Prop	Required	Default	Type
placeholder	true		string
width	false	'fixed'	'full' | 'fixed'
hasShortcut	false	false	boolean
hasSearchIcon	false	true	boolean
shortcutLetter	false		string
shortcutModifier	false		'cmd' | 'ctrl' | 'alt' | 'shift'
textSize	false	TextSize['text-sm']	TextSize
onSearch	false		() => void
onFocus	false		() => void
handleChange	false		ChangeEventHandler<HTMLInputElement>
showOnFocus	false	false	boolean
defaultValue	false		InputHTMLAttributes<HTMLInputElement>['defaultValue']
value	false		InputHTMLAttributes<HTMLInputElement>['value']
className	false		string
inputClassName	false		string
children	false		ReactNode