17 lines
1.3 KiB
JSON
17 lines
1.3 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "input-otp-controlled",
|
|
"type": "registry:example",
|
|
"author": "shadcn (https://ui.shadcn.com)",
|
|
"registryDependencies": [
|
|
"input-otp"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "examples/input-otp-controlled.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport default function InputOTPControlled() {\n const [value, setValue] = React.useState(\"\")\n\n return (\n <div className=\"space-y-2\">\n <InputOTP\n maxLength={6}\n value={value}\n onChange={(value) => setValue(value)}\n >\n <InputOTPGroup>\n <InputOTPSlot index={0} />\n <InputOTPSlot index={1} />\n <InputOTPSlot index={2} />\n <InputOTPSlot index={3} />\n <InputOTPSlot index={4} />\n <InputOTPSlot index={5} />\n </InputOTPGroup>\n </InputOTP>\n <div className=\"text-center text-sm\">\n {value === \"\" ? (\n <>Enter your one-time password.</>\n ) : (\n <>You entered: {value}</>\n )}\n </div>\n </div>\n )\n}\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
} |