{"componentChunkName":"component---src-pages-components-form-style-mdx","path":"/components/form/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Form","description":"Forms are used for submitting data. Consider each field and what value the data will provide.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/form/style.mdx","titleType":"prepend","MdxNode":{"id":"369d6876-3feb-5ce1-b2ba-7f3a29b8f4f9","children":[],"parent":"69a7fdf9-3c7d-507b-8f40-1af3c474e21b","internal":{"content":"---\ntitle: Form\ndescription: Forms are used for submitting data. Consider each field and what value the data will provide.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nInputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.\n\nRefer to the [text input](/components/text-input/code), [dropdown](/components/dropdown/code), [checkbox](/components/checkbox/code), [radio button](/components/radio-button/code), [toggle](/components/toggle/code), and [button](/components/button/code) pages for specific typography details on each component.\n\n<div className=\"image--fixed\">\n\n![Example of form fields in the two colors](images/form-style-3.png)\n\n</div>\n\n<Caption>\n  Example of light fields with $field-02 (left) and the default version with\n  $field-01 (right)\n</Caption>\n\n## Typography\n\nForm headings and labels should be set in sentence case with the first letter of the first word capitalized. Refer to the [text input](/components/text-input/code), [dropdown](/components/dropdown/code), [checkbox](/components/checkbox/code), [radio button](/components/radio-button/code), [toggle](/components/toggle/code), and [button](/components/button/code) pages for specific typography details on each component.\n\n| Property                       | Font-size (px/rem) | Font-weight   | Type token        |\n| ------------------------------ | ------------------ | ------------- | ----------------- |\n| Heading                        | 28 / 1.75          | Regular / 400 | `$heading-03`     |\n| `.bx--label`                   | 14 / 0.875         | Regular / 400 | `$label-01`       |\n| `.bx--text-input`              | 14 / 0.875         | Regular / 400 | `$body-short-01`  |\n| `.bx--text-input::placeholder` | 14 / 0.875         | Regular / 400 | `$body-short-01`  |\n| `.bx--form-requirement`        | 12 / 0.75          | Regular / 400 | `$label-01`       |\n| `.bx--form__helper-text`       | 12 / 0.75          | Regular / 400 | `$helper-text-01` |\n\n## Structure\n\nForms are made up of several different components. The order in which these elements are arranged is flexible, but should always follow the spacing guidelines below.\n\nForms can be one column or two. The width of each column varies based on the content and layout of the design. On mobile, forms can only have one column.\n\nAll icons can be found on the [icons](/guidelines/icons/library) library page.\n\n### Recommended\n\n| Element              | Property      | px / rem | Spacing token |\n| -------------------- | ------------- | -------- | ------------- |\n| Form items           | margin-bottom | 24 / 1.5 | `$spacing-06` |\n| Title area           | margin-bottom | 32 / 2   | `$spacing-07` |\n| Gutter between items | –             | 32 / 2   | `$spacing-07` |\n| Buttons              | margin-top    | 32 / 2   | `$spacing-07` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a double column form ](images/form-style-2.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for a double column form | px / rem\n</Caption>\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a single column form](images/form-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements</Caption>\n","type":"Mdx","contentDigest":"6a0a7ea2c63705ef0d27da3543bbcfa1","counter":1335,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Form","description":"Forms are used for submitting data. Consider each field and what value the data will provide.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Form\ndescription: Forms are used for submitting data. Consider each field and what value the data will provide.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nInputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.\n\nRefer to the [text input](/components/text-input/code), [dropdown](/components/dropdown/code), [checkbox](/components/checkbox/code), [radio button](/components/radio-button/code), [toggle](/components/toggle/code), and [button](/components/button/code) pages for specific typography details on each component.\n\n<div className=\"image--fixed\">\n\n![Example of form fields in the two colors](images/form-style-3.png)\n\n</div>\n\n<Caption>\n  Example of light fields with $field-02 (left) and the default version with\n  $field-01 (right)\n</Caption>\n\n## Typography\n\nForm headings and labels should be set in sentence case with the first letter of the first word capitalized. Refer to the [text input](/components/text-input/code), [dropdown](/components/dropdown/code), [checkbox](/components/checkbox/code), [radio button](/components/radio-button/code), [toggle](/components/toggle/code), and [button](/components/button/code) pages for specific typography details on each component.\n\n| Property                       | Font-size (px/rem) | Font-weight   | Type token        |\n| ------------------------------ | ------------------ | ------------- | ----------------- |\n| Heading                        | 28 / 1.75          | Regular / 400 | `$heading-03`     |\n| `.bx--label`                   | 14 / 0.875         | Regular / 400 | `$label-01`       |\n| `.bx--text-input`              | 14 / 0.875         | Regular / 400 | `$body-short-01`  |\n| `.bx--text-input::placeholder` | 14 / 0.875         | Regular / 400 | `$body-short-01`  |\n| `.bx--form-requirement`        | 12 / 0.75          | Regular / 400 | `$label-01`       |\n| `.bx--form__helper-text`       | 12 / 0.75          | Regular / 400 | `$helper-text-01` |\n\n## Structure\n\nForms are made up of several different components. The order in which these elements are arranged is flexible, but should always follow the spacing guidelines below.\n\nForms can be one column or two. The width of each column varies based on the content and layout of the design. On mobile, forms can only have one column.\n\nAll icons can be found on the [icons](/guidelines/icons/library) library page.\n\n### Recommended\n\n| Element              | Property      | px / rem | Spacing token |\n| -------------------- | ------------- | -------- | ------------- |\n| Form items           | margin-bottom | 24 / 1.5 | `$spacing-06` |\n| Title area           | margin-bottom | 32 / 2   | `$spacing-07` |\n| Gutter between items | –             | 32 / 2   | `$spacing-07` |\n| Buttons              | margin-top    | 32 / 2   | `$spacing-07` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a double column form ](images/form-style-2.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for a double column form | px / rem\n</Caption>\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a single column form](images/form-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements</Caption>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/form/style.mdx"}}}}