field-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field-demo",
  "type": "registry:example",
  "registryDependencies": [
    "field"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/field-demo.tsx",
      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function FieldDemo() {\n  return (\n    <div className=\"w-full max-w-md\">\n      <form>\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Payment Method</FieldLegend>\n            <FieldDescription>\n              All transactions are secure and encrypted\n            </FieldDescription>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                  Name on Card\n                </FieldLabel>\n                <Input\n                  id=\"checkout-7j9-card-name-43j\"\n                  placeholder=\"Evil Rabbit\"\n                  required\n                />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                  Card Number\n                </FieldLabel>\n                <Input\n                  id=\"checkout-7j9-card-number-uw1\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  required\n                />\n                <FieldDescription>\n                  Enter your 16-digit card number\n                </FieldDescription>\n              </Field>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"checkout-exp-month-ts6\">\n                    Month\n                  </FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"checkout-exp-month-ts6\">\n                      <SelectValue placeholder=\"MM\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"01\">01</SelectItem>\n                      <SelectItem value=\"02\">02</SelectItem>\n                      <SelectItem value=\"03\">03</SelectItem>\n                      <SelectItem value=\"04\">04</SelectItem>\n                      <SelectItem value=\"05\">05</SelectItem>\n                      <SelectItem value=\"06\">06</SelectItem>\n                      <SelectItem value=\"07\">07</SelectItem>\n                      <SelectItem value=\"08\">08</SelectItem>\n                      <SelectItem value=\"09\">09</SelectItem>\n                      <SelectItem value=\"10\">10</SelectItem>\n                      <SelectItem value=\"11\">11</SelectItem>\n                      <SelectItem value=\"12\">12</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                    Year\n                  </FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                      <SelectValue placeholder=\"YYYY\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"2024\">2024</SelectItem>\n                      <SelectItem value=\"2025\">2025</SelectItem>\n                      <SelectItem value=\"2026\">2026</SelectItem>\n                      <SelectItem value=\"2027\">2027</SelectItem>\n                      <SelectItem value=\"2028\">2028</SelectItem>\n                      <SelectItem value=\"2029\">2029</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                  <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                </Field>\n              </div>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <FieldSet>\n            <FieldLegend>Billing Address</FieldLegend>\n            <FieldDescription>\n              The billing address associated with your payment method\n            </FieldDescription>\n            <FieldGroup>\n              <Field orientation=\"horizontal\">\n                <Checkbox\n                  id=\"checkout-7j9-same-as-shipping-wgm\"\n                  defaultChecked\n                />\n                <FieldLabel\n                  htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                  className=\"font-normal\"\n                >\n                  Same as shipping address\n                </FieldLabel>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSet>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                  Comments\n                </FieldLabel>\n                <Textarea\n                  id=\"checkout-7j9-optional-comments\"\n                  placeholder=\"Add any additional comments\"\n                  className=\"resize-none\"\n                />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}