# Search Bar
Input optimized for query entry, clearing, and optional suggestions.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { SearchBar } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/search-bar
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=search-bar--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="136" title="Search Bar component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<SearchBar onSearch={setQuery} showSuggestions suggestions={["Fade In", "Slide"]} />
```

## Props

<PropsTable
  props={[
  {
    name: "onSearch",
    type: "(query: string) => void",
    description: "Fired when a search should be executed.",
  },
  {
    name: "onClear",
    type: "() => void",
    description: "Fired when the clear action is triggered.",
  },
  {
    name: "debounceMs",
    type: "number",
    default: "300",
    description: "Debounce delay for `onSearch` in milliseconds. Set to `0` for immediate search.",
  },
  {
    name: "clearable",
    type: "boolean",
    default: "true",
    description: "Whether the clear button is shown when input has value.",
  },
  {
    name: "suggestions",
    type: "string[]",
    description: "Candidate suggestion values.",
  },
  {
    name: "onSuggestionSelect",
    type: "(suggestion: string) => void",
    description: "Fired when a suggestion is selected.",
  },
  {
    name: "showSuggestions",
    type: "boolean",
    default: "false",
    description: "Enables the suggestions popover.",
  },
  {
    name: "variant",
    type: '"default" | "error"',
    default: '"default"',
    description: "Visual style of the input.",
  },
  {
    name: "size",
    type: '"sm" | "default"',
    default: '"default"',
    description: "Compact size scale.",
  },
]}
/>