{
  "name": "segmented-input-vertical-demo",
  "type": "registry:example",
  "registryDependencies": [
    "segmented-input"
  ],
  "files": [
    {
      "path": "examples/segmented-input-vertical-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  SegmentedInput,\n  SegmentedInputItem,\n} from \"@/registry/bases/radix/ui/segmented-input\";\n\nexport default function SegmentedInputVerticalDemo() {\n  const [address, setAddress] = React.useState({\n    street: \"\",\n    city: \"\",\n    zipCode: \"\",\n  });\n\n  const onFieldChange = React.useCallback(\n    (field: keyof typeof address) =>\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        setAddress((prev) => ({\n          ...prev,\n          [field]: event.target.value,\n        }));\n      },\n    [],\n  );\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        <label className=\"text-sm leading-none font-medium\">\n          Mailing Address\n        </label>\n        <SegmentedInput\n          aria-label=\"Mailing address input\"\n          className=\"w-full max-w-sm\"\n          orientation=\"vertical\"\n        >\n          <SegmentedInputItem\n            aria-label=\"Street address\"\n            placeholder=\"Street Address\"\n            value={address.street}\n            onChange={onFieldChange(\"street\")}\n          />\n          <SegmentedInputItem\n            aria-label=\"City\"\n            placeholder=\"City\"\n            value={address.city}\n            onChange={onFieldChange(\"city\")}\n          />\n          <SegmentedInputItem\n            aria-label=\"ZIP code\"\n            placeholder=\"ZIP Code\"\n            value={address.zipCode}\n            onChange={onFieldChange(\"zipCode\")}\n          />\n        </SegmentedInput>\n      </div>\n      <p className=\"text-sm text-muted-foreground\">\n        Use arrow keys (up/down) to navigate between fields in vertical\n        orientation.\n      </p>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}