# Clearable Input

Text input with a clear button that resets the value on Escape.

---

## Default

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

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

## With Label

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

export function Component(): JSX.Element {
  const [value, setValue] = useState('');
  return (
    <ClearableInput
      label="Email"
      onChange={(e) => {
        setValue(e.target.value);
      }}
      placeholder="Enter your email..."
      value={value}
    />
  );
}
```

## With Cmdk

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

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

## Disabled

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

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

## With Clear Callback

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

export function Component(): JSX.Element {
  const [value, setValue] = useState('');
  const [clearCount, setClearCount] = useState(0);
  return (
    <div className="flex flex-col gap-2">
      <ClearableInput
        aria-label="Clearable input with callback"
        onChange={(e) => {
          setValue(e.target.value);
        }}
        onClear={() => {
          setClearCount((prev) => prev + 1);
        }}
        placeholder="Enter some text and clear..."
        value={value}
      />
      <p className="text-copy-14 text-gray-900">Cleared {clearCount} times</p>
    </div>
  );
}
```