{"componentChunkName":"component---src-pages-components-select-style-mdx","path":"/components/select/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/select/style.mdx","titleType":"prepend","MdxNode":{"id":"2beed16b-46c8-5c46-aa23-125d2e21b558","children":[],"parent":"0e172204-9d11-50ec-848a-976ac1968ef1","internal":{"content":"---\ntitle: Select\ndescription: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\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\n| Class                 | Property   | Color toke  |\n| --------------------- | ---------- | ----------- |\n| `.bx--select-input`   | background | `$field-01` |\n| `.bx--select--light`  | background | `$field-02` |\n| `.bx--select--inline` | background | transparent |\n| `.bx--label`          | text color | `$text-01`  |\n| `.bx--select-input`   | text color | `$text-01`  |\n| `.bx--select--inline` | text color | `$icon-01`  |\n| `.bx--select__arrow`  | fill       | `$icon-01`  |\n\n<div className=\"image--fixed\">\n\n![Default and new selection state examples for Select](images/select-style-1.png)\n\n</div>\n\n<Caption>Examples of default and new selection select states</Caption>\n\n### Interaction states\n\n| Class                             | Property   | Color token    |\n| --------------------------------- | ---------- | -------------- |\n| `.bx--select-input:focus`         | border     | `$focus`       |\n| `.bx--select-input[data-invalid]` | border     | `$support-01`  |\n| `.bx--form-requirement`           | text color | `$support-01`  |\n| `.bx--select-input:disabled`      | background | `$disabled-01` |\n| `.bx--select-input:disabled`      | text color | `$disabled-02` |\n\n**Open:** Style determined by browser\n\n**Help text:** Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.\n\n**Error:** Error messages appear below the input field and are always present while invalid.\n\n**Disabled:** Disabled state has a `.not-allowed` cursor hover.\n\n<div className=\"image--fixed\">\n\n![Open, disabled, and more information/help state examples for Select](images/select-style-3.png)\n\n</div>\n\n<Caption>Examples of open, disabled, and help select states</Caption>\n\n## Typography\n\nSelect text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Select text should be three words or less.\n\n| Class                   | Font-size (px/rem) | Font-weight   | Type token       |\n| ----------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`            | 12 / 0. 75         | Regular / 400 | `$label-01`      |\n| `.bx--select-input`     | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n| `.bx--select--inline`   | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n| `.bx--form-requirement` | 12 / 0.75          | Regular / 400 | `$label-01`      |\n\n## Structure\n\n### Select\n\n| Class                     | Property                    | px / rem | Spacing token |\n| ------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--select-input`       | height                      | 40 / 2.5 | –             |\n| `.bx--label`              | margin-bottom               | 8 / 0.5  | `$spacing-03` |\n| `.bx--select-input`       | padding-left                | 16 / 1   | `$spacing-05` |\n| `.bx--select__arrow`      | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n| `.bx--select-input`       | border-bottom               | 1px      | –             |\n| `.bx--select-input:focus` | border                      | 2px      | –             |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for select](images/select-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for select | px / rem</Caption>\n\n### Small Select\n\n| Class                | Property                    | px / rem | Spacing token |\n| -------------------- | --------------------------- | -------- | ------------- |\n| `.bx--select-input`  | height                      | 32 / 2   | –             |\n| `.bx--select-input`  | padding-left                | 8 / 0.5  | `$spacing-03` |\n| `.bx--select__arrow` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for small select](images/select-style-4.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for small select | px / rem & examples of\n  open and disabled small select states\n</Caption>\n\n### Inline select\n\n| Class                | Property                    | px / rem | Spacing token |\n| -------------------- | --------------------------- | -------- | ------------- |\n| `.bx--select-input`  | height                      | 32 / 2   | –             |\n| `.bx--select-input`  | padding-left                | 8 / 0.5  | `$spacing-03` |\n| `.bx--select__arrow` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for Inline Select](images/select-style-6.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for inline select (focused) | px / rem\n</Caption>\n","type":"Mdx","contentDigest":"c48c2a332a2d31f8473f604a2d06036d","counter":1158,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Select","description":"Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Select\ndescription: Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\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\n| Class                 | Property   | Color toke  |\n| --------------------- | ---------- | ----------- |\n| `.bx--select-input`   | background | `$field-01` |\n| `.bx--select--light`  | background | `$field-02` |\n| `.bx--select--inline` | background | transparent |\n| `.bx--label`          | text color | `$text-01`  |\n| `.bx--select-input`   | text color | `$text-01`  |\n| `.bx--select--inline` | text color | `$icon-01`  |\n| `.bx--select__arrow`  | fill       | `$icon-01`  |\n\n<div className=\"image--fixed\">\n\n![Default and new selection state examples for Select](images/select-style-1.png)\n\n</div>\n\n<Caption>Examples of default and new selection select states</Caption>\n\n### Interaction states\n\n| Class                             | Property   | Color token    |\n| --------------------------------- | ---------- | -------------- |\n| `.bx--select-input:focus`         | border     | `$focus`       |\n| `.bx--select-input[data-invalid]` | border     | `$support-01`  |\n| `.bx--form-requirement`           | text color | `$support-01`  |\n| `.bx--select-input:disabled`      | background | `$disabled-01` |\n| `.bx--select-input:disabled`      | text color | `$disabled-02` |\n\n**Open:** Style determined by browser\n\n**Help text:** Help text appears below the label when the input is active. Help text remains visible while the input is focused and disappears after focus away.\n\n**Error:** Error messages appear below the input field and are always present while invalid.\n\n**Disabled:** Disabled state has a `.not-allowed` cursor hover.\n\n<div className=\"image--fixed\">\n\n![Open, disabled, and more information/help state examples for Select](images/select-style-3.png)\n\n</div>\n\n<Caption>Examples of open, disabled, and help select states</Caption>\n\n## Typography\n\nSelect text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Select text should be three words or less.\n\n| Class                   | Font-size (px/rem) | Font-weight   | Type token       |\n| ----------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`            | 12 / 0. 75         | Regular / 400 | `$label-01`      |\n| `.bx--select-input`     | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n| `.bx--select--inline`   | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n| `.bx--form-requirement` | 12 / 0.75          | Regular / 400 | `$label-01`      |\n\n## Structure\n\n### Select\n\n| Class                     | Property                    | px / rem | Spacing token |\n| ------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--select-input`       | height                      | 40 / 2.5 | –             |\n| `.bx--label`              | margin-bottom               | 8 / 0.5  | `$spacing-03` |\n| `.bx--select-input`       | padding-left                | 16 / 1   | `$spacing-05` |\n| `.bx--select__arrow`      | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n| `.bx--select-input`       | border-bottom               | 1px      | –             |\n| `.bx--select-input:focus` | border                      | 2px      | –             |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for select](images/select-style-2.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for select | px / rem</Caption>\n\n### Small Select\n\n| Class                | Property                    | px / rem | Spacing token |\n| -------------------- | --------------------------- | -------- | ------------- |\n| `.bx--select-input`  | height                      | 32 / 2   | –             |\n| `.bx--select-input`  | padding-left                | 8 / 0.5  | `$spacing-03` |\n| `.bx--select__arrow` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for small select](images/select-style-4.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for small select | px / rem & examples of\n  open and disabled small select states\n</Caption>\n\n### Inline select\n\n| Class                | Property                    | px / rem | Spacing token |\n| -------------------- | --------------------------- | -------- | ------------- |\n| `.bx--select-input`  | height                      | 32 / 2   | –             |\n| `.bx--select-input`  | padding-left                | 8 / 0.5  | `$spacing-03` |\n| `.bx--select__arrow` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for Inline Select](images/select-style-6.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for inline select (focused) | px / rem\n</Caption>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/select/style.mdx"}}}}