{
  "name": "ds-field",
  "description": "Form field wrapper container",
  "docUrl": "https://design.soracom.io/design-system/containers/field/",
  "category": "containers",
  "htmlElements": [
    "label",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "layout": [
      "--start",
      "--bottom",
      "--top-spacer"
    ],
    "notification-state": [
      "--notification",
      "--notification-success"
    ],
    "indent": "all",
    "gap": "all"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Label</div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter text\"></div></label>"
    },
    {
      "name": "div-wrapper",
      "html": "<div class=\"ds-field\"><label for=\"field-1\" class=\"ds-text --label\">Label content</label><div class=\"ds-input\"><input id=\"field-1\" type=\"text\"></div><div class=\"ds-text\">Helper text</div></div>"
    },
    {
      "name": "with-select",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Country</div><div class=\"ds-select\"><select><option>Select country</option><option>Japan</option><option>United States</option></select></div></label>"
    },
    {
      "name": "with-checkbox",
      "html": "<div class=\"ds-field\"><div class=\"ds-text --label\">Agreement</div><label class=\"ds-checkbox\"><input type=\"checkbox\"><span>I agree to the terms</span></label></div>"
    },
    {
      "name": "with-textarea",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Description</div><div class=\"ds-input\"><textarea placeholder=\"Enter description\"></textarea></div></label>"
    },
    {
      "name": "inline-addon",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Search</div><div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Search...\"></div><button class=\"ds-button --primary\" type=\"button\"><span>Go</span></button></div></label>"
    },
    {
      "name": "with-notice",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Email</div><div class=\"ds-input\"><input type=\"email\" placeholder=\"email@example.com\"></div><div class=\"ds-notice --alert\">Please enter a valid email address.</div></label>"
    },
    {
      "name": "file-upload",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Upload File</div><div class=\"ds-input\"><input type=\"file\"></div></label>"
    },
    {
      "name": "start",
      "html": "<label class=\"ds-field --start\"><div class=\"ds-text --label\">Narrow</div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Min width\"></div></label>"
    }
  ]
}