{
  "name": "segmented-input-form-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button",
    "segmented-input"
  ],
  "files": [
    {
      "path": "examples/segmented-input-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  SegmentedInput,\n  SegmentedInputItem,\n} from \"@/registry/bases/radix/ui/segmented-input\";\n\nexport default function SegmentedInputFormDemo() {\n  const [phoneNumber, setPhoneNumber] = React.useState({\n    countryCode: \"+1\",\n    areaCode: \"\",\n    number: \"\",\n  });\n\n  const onSubmit = React.useCallback(\n    (event: React.FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      console.log(\n        \"Phone number:\",\n        `${phoneNumber.countryCode} ${phoneNumber.areaCode}-${phoneNumber.number}`,\n      );\n    },\n    [phoneNumber],\n  );\n\n  return (\n    <form onSubmit={onSubmit} className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        <label className=\"text-sm leading-none font-medium\">Phone Number</label>\n        <SegmentedInput\n          className=\"w-full max-w-sm\"\n          aria-label=\"Phone number input\"\n        >\n          <SegmentedInputItem\n            placeholder=\"+1\"\n            value={phoneNumber.countryCode}\n            onChange={(event) =>\n              setPhoneNumber((prev) => ({\n                ...prev,\n                countryCode: event.target.value,\n              }))\n            }\n            className=\"w-16\"\n            aria-label=\"Country code\"\n          />\n          <SegmentedInputItem\n            placeholder=\"555\"\n            value={phoneNumber.areaCode}\n            onChange={(event) =>\n              setPhoneNumber((prev) => ({\n                ...prev,\n                areaCode: event.target.value,\n              }))\n            }\n            className=\"w-20\"\n            maxLength={3}\n            inputMode=\"numeric\"\n            pattern=\"[0-9]*\"\n            aria-label=\"Area code\"\n          />\n          <SegmentedInputItem\n            placeholder=\"1234567\"\n            value={phoneNumber.number}\n            onChange={(event) =>\n              setPhoneNumber((prev) => ({\n                ...prev,\n                number: event.target.value,\n              }))\n            }\n            className=\"flex-1\"\n            maxLength={7}\n            inputMode=\"numeric\"\n            pattern=\"[0-9]*\"\n            aria-label=\"Phone number\"\n          />\n        </SegmentedInput>\n      </div>\n      <Button type=\"submit\" size=\"sm\">\n        Submit\n      </Button>\n    </form>\n  );\n}\n",
      "target": ""
    }
  ]
}