{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-07",
  "title": "With clear button",
  "description": "Clear button appears in the trailing addon when the field has text.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "input-group",
    "button"
  ],
  "files": [
    {
      "path": "registry/patterns/input/input-07.tsx",
      "content": "import { useState } from 'react'\nimport { XIcon } from 'lucide-react'\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from '@/components/ui/input-group'\n\nexport function Input07() {\n  const [value, setValue] = useState('')\n\n  return (\n    <InputGroup className=\"max-w-sm\">\n      <InputGroupInput\n        placeholder=\"Search...\"\n        value={value}\n        onChange={(event) => setValue(event.target.value)}\n      />\n      {value.length > 0 && (\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            aria-label=\"Clear\"\n            size=\"icon-xs\"\n            onClick={() => setValue('')}\n          >\n            <XIcon />\n          </InputGroupButton>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/input/input-07.tsx"
    }
  ],
  "type": "registry:block"
}