{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-35","type":"registry:block","title":"Password input with visibility toggle","description":"Password input with visibility toggle","dependencies":[],"registryDependencies":["field","input-group"],"files":[{"path":"c-input-group-35.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Field } from \"@/components/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  const [showPassword, setShowPassword] = useState(false)\n\n  return (\n    <Field className=\"max-w-xs\">\n      <InputGroup>\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"LockIcon\"\n            tabler=\"IconLock\"\n            hugeicons=\"SquareLock01Icon\"\n            phosphor=\"LockSimpleIcon\"\n            remixicon=\"RiLockLine\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </InputGroupAddon>\n        <InputGroupInput\n          type={showPassword ? \"text\" : \"password\"}\n          placeholder=\"Enter password\"\n        />\n        <InputGroupButton\n          variant=\"ghost\"\n          onClick={() => setShowPassword(!showPassword)}\n        >\n          {showPassword ? (\n            <IconPlaceholder\n              lucide=\"EyeOffIcon\"\n              tabler=\"IconEyeOff\"\n              hugeicons=\"ViewOffSlashIcon\"\n              phosphor=\"EyeSlashIcon\"\n              remixicon=\"RiEyeOffLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          ) : (\n            <IconPlaceholder\n              lucide=\"EyeIcon\"\n              tabler=\"IconEye\"\n              hugeicons=\"ViewIcon\"\n              phosphor=\"EyeIcon\"\n              remixicon=\"RiEyeLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          )}\n        </InputGroupButton>\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-35.tsx"}],"meta":{"order":35}}