{"componentChunkName":"component---src-pages-components-select-usage-mdx","path":"/components/select/usage/","result":{"pageContext":{"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","Accessibility"]},"relativePagePath":"/components/select/usage.mdx","titleType":"prepend","MdxNode":{"id":"5979298c-aa8b-5e63-bce4-6fe6505538ab","children":[],"parent":"6e223f17-589f-5be8-93e9-fef31764d07d","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', 'Accessibility']\n---\n\n## General guidance\n\n_Select_ is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\n\n### Select versus Dropdown\n\nWhile the select and dropdown components look similar, they have different functions.\n\n- Use the select component inside a form where users are selecting from a list of options and submitting data.\n- Use the dropdown component to filter or sort content on a page.\n\nAnother important difference between the two components is the underlying code. The select component's appearance will be determined by the browser being used, while the dropdown component can be styled as needed.\n\n## Variations\n\n| Select type | Purpose |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| _Default_ | Typically used in forms with a variety of other components. |\n| _Small select_ | When vertical space is a concern, or select is being paired with a larger component like [data tables](/components/data-table/code). |\n| _Inline select_ | When multiple selects are grouped together. |\n\n#### Small select\n\n_Small selects_ are commonly used in [data tables](/components/data-table/code). When using a small select for a number selection, the increments in the select should be 10, 25, 50 and 100. The maximum amount of items a user can see per page is 100.\n\n\n\n\n\n\n\n
\n\n#### Inline select\n\nInline select is useful when you have multiple select fields within a form. Inline selects have less visual weight on a page because they are borderless.\n\n\n\n\n\n\n\n
\n\n## General guidelines\n\n### Labels\n\nLabels are essential to the usability of forms. Do not place a label inside a _select_ element. Use sentence case and no more than three words.\n\n### Validation\n\nReal-time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the [forms](/components/form/code) usage page.\n\n\n\n\n\n\n\n
\n\n### Order\n\nThe order of the select list should be based on the frequency of use. If applicable, the list should be in increasing order relative to the content. In cases of forms, alternative orders such as alphabetical may be more fitting. A horizontal rule can be used to group similar items together.\n\n## Accessibility\n\n### Styling select dropdowns\n\nTo maximize accessibility, it is strongly recommended not to style select dropdowns.\nOne of the [WCAG 2.0 standards](https://www.w3.org/TR/WCAG20-TECHS/G202.html) for accessibility is “ensuring keyboard control for all functionality.” CSS alternatives to select elements do not meet this requirement.\n\nWhile you can make a select element easily usable by a mouse, making it usable with keyboard navigation is complex. The default select element should follow this process:\n\n| State | Mouse | Keyboard |\n| -------- | ---------------------------------------- | --------------------------------------------------- |\n| _:hover_ | move your cursor over the select element | use the tab key to focus the select element |\n| _:focus_ | click on the select element | press enter |\n| _:_ | move your cursor over the desired option | use the top and bottom arrow keys to pick an option |\n| :select | click on the desired option | press enter |\n","type":"Mdx","contentDigest":"22d0a0072fc23022d878373a01dcc276","counter":1570,"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","Accessibility"]},"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', 'Accessibility']\n---\n\n## General guidance\n\n_Select_ is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.\n\n### Select versus Dropdown\n\nWhile the select and dropdown components look similar, they have different functions.\n\n- Use the select component inside a form where users are selecting from a list of options and submitting data.\n- Use the dropdown component to filter or sort content on a page.\n\nAnother important difference between the two components is the underlying code. The select component's appearance will be determined by the browser being used, while the dropdown component can be styled as needed.\n\n## Variations\n\n| Select type | Purpose |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| _Default_ | Typically used in forms with a variety of other components. |\n| _Small select_ | When vertical space is a concern, or select is being paired with a larger component like [data tables](/components/data-table/code). |\n| _Inline select_ | When multiple selects are grouped together. |\n\n#### Small select\n\n_Small selects_ are commonly used in [data tables](/components/data-table/code). When using a small select for a number selection, the increments in the select should be 10, 25, 50 and 100. The maximum amount of items a user can see per page is 100.\n\n\n\n\n\n\n\n
\n\n#### Inline select\n\nInline select is useful when you have multiple select fields within a form. Inline selects have less visual weight on a page because they are borderless.\n\n\n\n\n\n\n\n
\n\n## General guidelines\n\n### Labels\n\nLabels are essential to the usability of forms. Do not place a label inside a _select_ element. Use sentence case and no more than three words.\n\n### Validation\n\nReal-time validation helps to streamline the process and keep data clean when the user is filling out forms. For full guidelines, refer to the [forms](/components/form/code) usage page.\n\n\n\n\n\n\n\n
\n\n### Order\n\nThe order of the select list should be based on the frequency of use. If applicable, the list should be in increasing order relative to the content. In cases of forms, alternative orders such as alphabetical may be more fitting. A horizontal rule can be used to group similar items together.\n\n## Accessibility\n\n### Styling select dropdowns\n\nTo maximize accessibility, it is strongly recommended not to style select dropdowns.\nOne of the [WCAG 2.0 standards](https://www.w3.org/TR/WCAG20-TECHS/G202.html) for accessibility is “ensuring keyboard control for all functionality.” CSS alternatives to select elements do not meet this requirement.\n\nWhile you can make a select element easily usable by a mouse, making it usable with keyboard navigation is complex. The default select element should follow this process:\n\n| State | Mouse | Keyboard |\n| -------- | ---------------------------------------- | --------------------------------------------------- |\n| _:hover_ | move your cursor over the select element | use the tab key to focus the select element |\n| _:focus_ | click on the select element | press enter |\n| _:_ | move your cursor over the desired option | use the top and bottom arrow keys to pick an option |\n| :select | click on the desired option | press enter |\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/select/usage.mdx"}}}}