{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "field",
    "type": "registry:component",
    "title": "Field",
    "description": "An underline-style form field (label plus borderless input) used by the marketing forms.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Forms",
        "layout": "form"
    },
    "files": [
        {
            "path": "components/field.html",
            "type": "registry:file",
            "target": "components/field.html",
            "content": "<!-- Field\n     An underline-style form field: a bold label above a borderless input with\n     a single bottom rule. Use for marketing forms (contact, newsletter). For\n     boxed inputs inside the app, use the input component instead. -->\n\n<div class=\"dp-field\">\n  <label class=\"dp-field-label\" for=\"field-name\">Work email</label>\n  <input class=\"dp-field-input\" id=\"field-name\" type=\"email\" placeholder=\"you@company.com\">\n</div>\n\n<div class=\"dp-field\">\n  <label class=\"dp-field-label\" for=\"field-source\">How did you hear about us?</label>\n  <select class=\"dp-field-input\" id=\"field-source\">\n    <option value=\"\">Please select</option>\n    <option value=\"search\">Search engine</option>\n    <option value=\"referral\">Referral</option>\n  </select>\n</div>\n\n<div class=\"dp-field\">\n  <label class=\"dp-field-label\" for=\"field-msg\">Message</label>\n  <textarea class=\"dp-field-input\" id=\"field-msg\" rows=\"2\"></textarea>\n</div>\n"
        },
        {
            "path": "components/field.css",
            "type": "registry:file",
            "target": "components/field.css",
            "content": "/* Field\n   An underline-style form field used by the marketing forms: a bold label\n   above a borderless input that carries only a bottom rule. Works for text\n   inputs, textareas and selects. Colour and type from tokens.css. */\n\n.dp-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-2);\n}\n\n.dp-field-label {\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-field-input {\n  width: 100%;\n  padding: var(--dp-space-2) 0;\n  font: inherit;\n  font-size: var(--dp-text-base);\n  color: var(--dp-text);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dp-border-strong);\n  border-radius: 0;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.dp-field-input::placeholder { color: var(--dp-text-subtle); }\n\n.dp-field-input:focus { border-bottom-color: var(--dp-link); }\n\ntextarea.dp-field-input { resize: vertical; }\n\nselect.dp-field-input {\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 0 center;\n  background-size: 1.1rem;\n  padding-right: 1.6rem;\n}\n"
        }
    ]
}