{"componentChunkName":"component---src-pages-components-checkbox-style-mdx","path":"/components/checkbox/style/","result":{"pageContext":{"frontmatter":{"title":"Checkbox","description":"Checkboxes are used for a list of options where the user may select multiple options, including all or none.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/checkbox/style.mdx","titleType":"prepend","MdxNode":{"id":"fd208438-808c-5e33-be4f-9ab88b37e68a","children":[],"parent":"ed3196e9-4435-51f6-8c61-05fc11c41496","internal":{"content":"---\ntitle: Checkbox\ndescription: Checkboxes are used for a list of options where the user may select multiple options, including all or none.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\n| Class                     | Property         | Color token   |\n| ------------------------- | ---------------- | ------------- |\n| `.bx--label`              | text color       | `$text-02`    |\n| `.bx--checkbox-label`     | text color       | `$text-01`    |\n| `.bx--checkbox`           | border           | `$ui-05`      |\n| `.bx--checkbox:unchecked` | background-color | transparent   |\n| `.bx--checkbox:checked`   | background-color | `$ui-05`      |\n| `.bx--checkbox:checked`   | checkmark        | `$inverse-01` |\n\n### Interactive states\n\n| State       | Property   | Color token    |\n| ----------- | ---------- | -------------- |\n| `:focus`    | border     | `$focus`       |\n| `:disabled` | text color | `$disabled-02` |\n| `:disabled` | border     | `$disabled-02` |\n\n<div className=\"image--fixed\">\n\n![Disabled and normal checkbox states](images/checkbox-style-1.png)\n\n</div>\n\n<Caption>Disabled and normal checkbox states</Caption>\n\n## Typography\n\nCheckbox headings and labels should be sentence case, with only the first word in a phrase and any proper nouns capitalized. Checkbox headings and labels should not exceed three words.\n\n| Class                 | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`          | 12 / 0.75          | Regular / 400 | `$label-01`      |\n| `.bx--checkbox-label` | 14 / 0.875         | Regualr / 400 | `$body-short-01` |\n\n## Structure\n\n| Class                                 | Property       | px / rem | Spacing token |\n| ------------------------------------- | -------------- | -------- | ------------- |\n| `.bx--checkbox`                       | height & width | 16px     | –             |\n| `.bx--checkbox`                       | border         | 1px      | –             |\n| `.bx--label`                          | margin-bottom  | 8 / 0.5  | `$spacing-03` |\n| `.bx--checkbox-label`                 | padding-left   | 8 / 0.5  | `$spacing-03` |\n| `.bx--form-item.bx--checkbox-wrapper` | margin-bottom  | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for checkbox](images/checkbox-style-3.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for checkbox | px / rem</Caption>\n","type":"Mdx","contentDigest":"fc129425c29bf76684eadfeaa40d8ea6","counter":1489,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Checkbox","description":"Checkboxes are used for a list of options where the user may select multiple options, including all or none.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Checkbox\ndescription: Checkboxes are used for a list of options where the user may select multiple options, including all or none.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\n| Class                     | Property         | Color token   |\n| ------------------------- | ---------------- | ------------- |\n| `.bx--label`              | text color       | `$text-02`    |\n| `.bx--checkbox-label`     | text color       | `$text-01`    |\n| `.bx--checkbox`           | border           | `$ui-05`      |\n| `.bx--checkbox:unchecked` | background-color | transparent   |\n| `.bx--checkbox:checked`   | background-color | `$ui-05`      |\n| `.bx--checkbox:checked`   | checkmark        | `$inverse-01` |\n\n### Interactive states\n\n| State       | Property   | Color token    |\n| ----------- | ---------- | -------------- |\n| `:focus`    | border     | `$focus`       |\n| `:disabled` | text color | `$disabled-02` |\n| `:disabled` | border     | `$disabled-02` |\n\n<div className=\"image--fixed\">\n\n![Disabled and normal checkbox states](images/checkbox-style-1.png)\n\n</div>\n\n<Caption>Disabled and normal checkbox states</Caption>\n\n## Typography\n\nCheckbox headings and labels should be sentence case, with only the first word in a phrase and any proper nouns capitalized. Checkbox headings and labels should not exceed three words.\n\n| Class                 | Font-size (px/rem) | Font-weight   | Type token       |\n| --------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`          | 12 / 0.75          | Regular / 400 | `$label-01`      |\n| `.bx--checkbox-label` | 14 / 0.875         | Regualr / 400 | `$body-short-01` |\n\n## Structure\n\n| Class                                 | Property       | px / rem | Spacing token |\n| ------------------------------------- | -------------- | -------- | ------------- |\n| `.bx--checkbox`                       | height & width | 16px     | –             |\n| `.bx--checkbox`                       | border         | 1px      | –             |\n| `.bx--label`                          | margin-bottom  | 8 / 0.5  | `$spacing-03` |\n| `.bx--checkbox-label`                 | padding-left   | 8 / 0.5  | `$spacing-03` |\n| `.bx--form-item.bx--checkbox-wrapper` | margin-bottom  | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for checkbox](images/checkbox-style-3.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for checkbox | px / rem</Caption>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/checkbox/style.mdx"}}}}