{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-input-group-24",
  "description": "Input group with character counter",
  "registryDependencies": [
    "@coss/input-group"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-input-group-24.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const maxLength = 14;\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Username\"\n        maxLength={maxLength}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter username\"\n        type=\"text\"\n        value={value}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupText\n          aria-live=\"polite\"\n          className=\"text-xs tabular-nums\"\n          role=\"status\"\n        >\n          {value.length}/{maxLength}\n        </InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "input",
    "input group"
  ],
  "type": "registry:block"
}