{"componentChunkName":"component---src-pages-components-dropdown-style-mdx","path":"/components/dropdown/style/","result":{"pageContext":{"frontmatter":{"title":"Dropdown","description":"Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/dropdown/style.mdx","titleType":"prepend","MdxNode":{"id":"c5829374-8a1b-53c3-a4c3-0e01e54a4d6a","children":[],"parent":"6ca8050f-6e8d-558a-8735-36a82f6c517d","internal":{"content":"---\ntitle: Dropdown\ndescription: Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\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 | SCSS |\n| --------------------------------- | ---------------- | ------------------------------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--dropdown` | background-color | `$field-01` |\n| `.bx--dropdown` | border-bottom | `$ui-04` |\n| `.bx--dropdown--light` | background-color | `$field-02` |\n| `.bx--dropdown-list` | background-color | `$ui-01` |\n| `.bx--dropdown-text` | text color | `$text-01` |\n| `:placeholder` | text color | `$text-03` |\n| `.bx--dropdown-item` | background-color | `$hover-ui` |\n| `.bx--dropdown-item` | text color | `$text-02` |\n| `.bx--dropdown__arrow` | fill | `$icon-01` |\n| `.bx--list-box__selection--multi` | background-color | `$ui-05` |\n| `.bx--dropdown--open` | box-shadow | `0 4px 8px 0 rgba(0,0,0,0.10);` |\n\n\n\n\n\n
\n\nExample of a closed and opened dropdown\n\n### Interactive states\n\n| Class | Property | SCSS |\n| ----------------------------- | ---------------- | -------------- |\n| `:focus` | border | `$focus` |\n| `.bx--dropdown-item:hover` | background-color | `$hover-ui` |\n| `.bx--dropdown-item:hover` | text color | `$text-01` |\n| `.bx--form-requirement` | text color | `$support-01` |\n| `[data-invalid]` | border-bottom | `$support-01` |\n| `.bx--label:disabled` | text color | `$disabled-02` |\n| `.bx--dropdown:disabled` | background-color | `$disabled-01` |\n| `.bx--dropdown-text:disabled` | text color | `$disabled-02` |\n\n**Active:** Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing, the hint text is replaced with the user input text.\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 should has a `.not-allowed` cursor on hover.\n\n## Typography\n\nAll dropdown text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Dropdown options should not exceed three words.\n\n| Class | Font-size | Font-weight | Type style |\n| ----------------------- | ---------- | ------------- | ---------------- |\n| `.bx--dropdown-text` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--dropdown-link` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--label` | 14 / 0.875 | Regular / 400 | `$label-01` |\n| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |\n\n## Structure\n\nDropdowns have two states, open and closed. An open and closed dropdown should be the same width and appropriately fit the design, layout, and content. The height of a closed dropdown stays consistent while the height of an open dropdown will vary based on the amount of options it has. Please note the various color differences for closed and open dropdowns.\n\n| Class | Property | px / rem | Spacing tokens |\n| ---------------------- | --------------------------- | -------- | -------------- |\n| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--dropdown` | height | 40 / 2.5 | – |\n| `.bx--dropdown-text` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--dropdown__arrow` | padding-right, padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--dropdown` | border-bottom | 1px | – |\n| `.bx--dropdown-item` | height | 40 / 2.5 | – |\n\n\n\n\n\n
\n\nStructure and spacing measurements for dropdown | px / rem\n\n## Multi-select dropdown\n\n| Class | Property | px / rem | Spacing tokens |\n| --------------------------------- | --------------------------- | -------- | -------------- |\n| `.bx--list-box` | height | 40 / 2.5 | – |\n| `.bx--list-box__menu-item` | height | 40 / 2.5 | – |\n| `.bx--list-box__field` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--checkbox-label` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__menu-icon` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__selection--multi` | height | 24 / 1.5 | – |\n| `.bx--list-box__selection--multi` | margin-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a multi-select dropdown | px / rem\n\n\n## Inline dropdown\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------ | --------------------------- | -------- | ------------- |\n| `.bx--list-box.bx--list-box--inline` | height | 32 / 2 | - |\n| `.bx--list-box__menu-item` | height | 40 / 2.5 | - |\n| `.bx--list-box__menu-item` | padding-right, padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--checkbox-label` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__menu-icon` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\nStructure and spacing for inline dropdown | px / rem\n\n### Inline dropdown states\n\nInline select has two different states; one for mouse hover and one for keyboard focus.\n\n\n\n\n\n
\n\nHover and focus states for inline dropdown\n\n## Filtering\n\nFiltering can be used with dropdown and multi-select dropdown but not inline dropdown.\n\n| Class | Property | px / rem | Spacing token |\n| --------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--list-box__selection` | height | 40 / 2.5 | – |\n| `.bx--list-box__selection svg` | height | 16 / 1 | – |\n| `.bx--list-box__menu-icon` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__selection` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__selection--multi` | height | 24 / 1.5 | – |\n\n\n\n\n\n
\n\nSpacing for multi-select dropdown with filtering | px / rem\n\n\n\n\n\n
\n\n\n Interaction states for multi-select dropdown with filtering | px / rem\n\n","type":"Mdx","contentDigest":"99eefbc515658964159cbb668dad29f4","counter":1511,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Dropdown","description":"Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Dropdown\ndescription: Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\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 | SCSS |\n| --------------------------------- | ---------------- | ------------------------------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--dropdown` | background-color | `$field-01` |\n| `.bx--dropdown` | border-bottom | `$ui-04` |\n| `.bx--dropdown--light` | background-color | `$field-02` |\n| `.bx--dropdown-list` | background-color | `$ui-01` |\n| `.bx--dropdown-text` | text color | `$text-01` |\n| `:placeholder` | text color | `$text-03` |\n| `.bx--dropdown-item` | background-color | `$hover-ui` |\n| `.bx--dropdown-item` | text color | `$text-02` |\n| `.bx--dropdown__arrow` | fill | `$icon-01` |\n| `.bx--list-box__selection--multi` | background-color | `$ui-05` |\n| `.bx--dropdown--open` | box-shadow | `0 4px 8px 0 rgba(0,0,0,0.10);` |\n\n\n\n\n\n
\n\nExample of a closed and opened dropdown\n\n### Interactive states\n\n| Class | Property | SCSS |\n| ----------------------------- | ---------------- | -------------- |\n| `:focus` | border | `$focus` |\n| `.bx--dropdown-item:hover` | background-color | `$hover-ui` |\n| `.bx--dropdown-item:hover` | text color | `$text-01` |\n| `.bx--form-requirement` | text color | `$support-01` |\n| `[data-invalid]` | border-bottom | `$support-01` |\n| `.bx--label:disabled` | text color | `$disabled-02` |\n| `.bx--dropdown:disabled` | background-color | `$disabled-01` |\n| `.bx--dropdown-text:disabled` | text color | `$disabled-02` |\n\n**Active:** Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing, the hint text is replaced with the user input text.\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 should has a `.not-allowed` cursor on hover.\n\n## Typography\n\nAll dropdown text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Dropdown options should not exceed three words.\n\n| Class | Font-size | Font-weight | Type style |\n| ----------------------- | ---------- | ------------- | ---------------- |\n| `.bx--dropdown-text` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--dropdown-link` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--label` | 14 / 0.875 | Regular / 400 | `$label-01` |\n| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |\n\n## Structure\n\nDropdowns have two states, open and closed. An open and closed dropdown should be the same width and appropriately fit the design, layout, and content. The height of a closed dropdown stays consistent while the height of an open dropdown will vary based on the amount of options it has. Please note the various color differences for closed and open dropdowns.\n\n| Class | Property | px / rem | Spacing tokens |\n| ---------------------- | --------------------------- | -------- | -------------- |\n| `.bx--label` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--dropdown` | height | 40 / 2.5 | – |\n| `.bx--dropdown-text` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--dropdown__arrow` | padding-right, padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--dropdown` | border-bottom | 1px | – |\n| `.bx--dropdown-item` | height | 40 / 2.5 | – |\n\n\n\n\n\n
\n\nStructure and spacing measurements for dropdown | px / rem\n\n## Multi-select dropdown\n\n| Class | Property | px / rem | Spacing tokens |\n| --------------------------------- | --------------------------- | -------- | -------------- |\n| `.bx--list-box` | height | 40 / 2.5 | – |\n| `.bx--list-box__menu-item` | height | 40 / 2.5 | – |\n| `.bx--list-box__field` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--checkbox-label` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__menu-icon` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__selection--multi` | height | 24 / 1.5 | – |\n| `.bx--list-box__selection--multi` | margin-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a multi-select dropdown | px / rem\n\n\n## Inline dropdown\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------ | --------------------------- | -------- | ------------- |\n| `.bx--list-box.bx--list-box--inline` | height | 32 / 2 | - |\n| `.bx--list-box__menu-item` | height | 40 / 2.5 | - |\n| `.bx--list-box__menu-item` | padding-right, padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--checkbox-label` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__menu-icon` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\nStructure and spacing for inline dropdown | px / rem\n\n### Inline dropdown states\n\nInline select has two different states; one for mouse hover and one for keyboard focus.\n\n\n\n\n\n
\n\nHover and focus states for inline dropdown\n\n## Filtering\n\nFiltering can be used with dropdown and multi-select dropdown but not inline dropdown.\n\n| Class | Property | px / rem | Spacing token |\n| --------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--list-box__selection` | height | 40 / 2.5 | – |\n| `.bx--list-box__selection svg` | height | 16 / 1 | – |\n| `.bx--list-box__menu-icon` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__selection` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--list-box__selection--multi` | height | 24 / 1.5 | – |\n\n\n\n\n\n
\n\nSpacing for multi-select dropdown with filtering | px / rem\n\n\n\n\n\n
\n\n\n Interaction states for multi-select dropdown with filtering | px / rem\n\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/dropdown/style.mdx"}}}}