# Search Input

Pre-configured search input with a magnifying glass icon and clear button.

---

## Default

```tsx
import { SearchInput } from '@vercel/geistcn/components';
import type { JSX } from 'react';
import { useState } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('');
  return (
    <SearchInput
      aria-label="Search"
      onChange={(e) => {
        setValue(e.target.value);
      }}
      placeholder="Enter some text..."
      value={value}
    />
  );
}
```

## With Cmdk

```tsx
import { SearchInput } from '@vercel/geistcn/components';
import type { JSX } from 'react';
import { useState } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('');
  return (
    <SearchInput
      aria-label="Search"
      cmdk
      onChange={(e) => {
        setValue(e.target.value);
      }}
      placeholder="Enter some text..."
      value={value}
    />
  );
}
```

## Disabled

```tsx
import { SearchInput } from '@vercel/geistcn/components';
import type { JSX } from 'react';
import { useState } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('');
  return (
    <SearchInput
      aria-label="Search"
      cmdk
      disabled
      onChange={(e) => {
        setValue(e.target.value);
      }}
      placeholder="Enter some text..."
      value={value}
    />
  );
}
```

## Loading

```tsx
import { SearchInput } from '@vercel/geistcn/components';
import type { JSX } from 'react';
import { useState } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('Project A');
  return (
    <SearchInput
      aria-label="Search"
      loading
      onChange={(e) => {
        setValue(e.target.value);
      }}
      placeholder="Enter some text..."
      value={value}
    />
  );
}
```

## Custom Prefix

```tsx
import { SearchInput } from '@vercel/geistcn/components';
import { IconSparkles } from '@vercel/geistcn-assets/icons';
import type { JSX } from 'react';
import { useState } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('');
  return (
    <SearchInput
      aria-label="Search"
      onChange={(e) => {
        setValue(e.target.value);
      }}
      placeholder="Enter some text..."
      prefix={<IconSparkles />}
      value={value}
    />
  );
}
```