field-badge.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field-badge",
  "type": "registry:example",
  "registryDependencies": [
    "field"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/field-badge.tsx",
      "content": "import { Badge } from \"@/registry/new-york-v4/ui/badge\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\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\";\n\nexport default function FieldBadge() {\n  return (\n    <FieldSet>\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"username-badge\">\n            Username <Badge variant=\"secondary\">Required</Badge>\n          </FieldLabel>\n          <FieldDescription>\n            Choose a unique username for your profile.\n          </FieldDescription>\n          <Input id=\"username-badge\" type=\"text\" placeholder=\"Enter username\" />\n        </Field>\n\n        <Field>\n          <FieldLabel htmlFor=\"api-key\">\n            API Key <Badge variant=\"destructive\">Sensitive</Badge>\n          </FieldLabel>\n          <FieldDescription>\n            Your API key will be encrypted and stored securely.\n          </FieldDescription>\n          <Input\n            id=\"api-key\"\n            type=\"password\"\n            placeholder=\"Enter API key\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel htmlFor=\"subscription\">\n            Subscription Plan <Badge variant=\"outline\">Premium Feature</Badge>\n          </FieldLabel>\n          <FieldDescription>\n            Upgrade to access premium plans.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select plan\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"basic\">Basic</SelectItem>\n              <SelectItem value=\"pro\">Pro</SelectItem>\n              <SelectItem value=\"enterprise\">Enterprise</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n\n        <Field>\n          <FieldLabel htmlFor=\"beta-feature\">\n            Beta Features <Badge variant=\"default\">New</Badge>\n          </FieldLabel>\n          <FieldDescription>\n            Enable experimental features (may be unstable).\n          </FieldDescription>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Choose option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"enabled\">Enabled</SelectItem>\n              <SelectItem value=\"disabled\">Disabled</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n\n        <Field>\n          <FieldLabel htmlFor=\"admin-email\">\n            Admin Email\n            <div className=\"flex gap-1 ml-2\">\n              <Badge variant=\"secondary\">Required</Badge>\n              <Badge variant=\"outline\">Admin Only</Badge>\n            </div>\n          </FieldLabel>\n          <FieldDescription>\n            Administrative notifications will be sent here.\n          </FieldDescription>\n          <Input\n            id=\"admin-email\"\n            type=\"email\"\n            placeholder=\"admin@example.com\"\n          />\n        </Field>\n\n        <Field>\n          <FieldLabel htmlFor=\"feature-status\">\n            Feature Status <Badge>Active</Badge>\n          </FieldLabel>\n          <Input\n            id=\"feature-status\"\n            type=\"text\"\n            placeholder=\"Feature name\"\n            disabled\n          />\n          <FieldDescription>\n            This feature is currently active and cannot be modified.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n}",
      "type": "registry:example"
    }
  ]
}