{"componentChunkName":"component---src-pages-components-checkbox-usage-mdx","path":"/components/checkbox/usage/","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/usage.mdx","titleType":"prepend","MdxNode":{"id":"a3726539-6aa2-59ff-ab51-6ea278cc71da","children":[],"parent":"ef39acf1-329e-5525-9188-9ef81c85f9dd","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\n\nGeneral guidance\nRelated components\nContent\nTables\n\n\n\n## General guidance\n\nCheckboxes are used for a list of options where the user may select multiple options, including all or none.\n\n#### Checkbox states\n\nThe checkbox control allows for three states: **selected**, **unselected**, and **indeterminate**. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.\n\n#### Click target\n\nUsers should be able to select the checkbox by clicking on the box directly or by clicking on its label.\n\n#### Default selection\n\nThe default view of a set of checkboxes is having no option selected.\n\n\n\n\n\n\n\n
\n\nBy default, checkboxes are unchecked.\n\n## Related components\n\n#### Checkbox vs. radio button\n\nWhereas radio buttons represent a group of _mutually exclusive_ choices, users can select one or more checkboxes from a group. In use cases where only one selection of a group is allowed, use the radio button component instead of the checkbox.\n\n#### Checkbox vs. toggle switch\n\nGenerally, toggle switches are preferred when the resulting action will be instantaneously applied, without the need for further confirmation. Checkboxes generally represent one input in a larger flow which requires a final confirmation step.\n\n#### References\n\n
\n\n- [Toggle](/components/toggle/code)\n- [Radio button](/components/radio-button/code)\n- [Form](/components/form/code)\n- _Data table (coming soon)_\n\n## Content\n\n#### Headings\n\nIf necessary, a heading can accompany a set of checkboxes to provide further context or clarity. Use sentence case for checkbox headings. In the example below, “IBM designers” would be the heading for the set of checkboxes.\n\n#### Labels\n\nAlways use clear and concise labels for checkboxes. Be explicit about the results that will follow if the checkbox is selected. Labels appear to the right of checkboxes.\n\n## Tables\n\nSee the [data table](/components/data-table/usage) section for guidance on how to use checkboxes within a table.\n","type":"Mdx","contentDigest":"9ba0b1ab102dcd11bc09e14e555034fe","counter":1490,"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\n\nGeneral guidance\nRelated components\nContent\nTables\n\n\n\n## General guidance\n\nCheckboxes are used for a list of options where the user may select multiple options, including all or none.\n\n#### Checkbox states\n\nThe checkbox control allows for three states: **selected**, **unselected**, and **indeterminate**. The indeterminate state comes into play when the checkbox contains a sublist of selections, some of which are selected, and some unselected.\n\n#### Click target\n\nUsers should be able to select the checkbox by clicking on the box directly or by clicking on its label.\n\n#### Default selection\n\nThe default view of a set of checkboxes is having no option selected.\n\n\n\n\n\n\n\n
\n\nBy default, checkboxes are unchecked.\n\n## Related components\n\n#### Checkbox vs. radio button\n\nWhereas radio buttons represent a group of _mutually exclusive_ choices, users can select one or more checkboxes from a group. In use cases where only one selection of a group is allowed, use the radio button component instead of the checkbox.\n\n#### Checkbox vs. toggle switch\n\nGenerally, toggle switches are preferred when the resulting action will be instantaneously applied, without the need for further confirmation. Checkboxes generally represent one input in a larger flow which requires a final confirmation step.\n\n#### References\n\n
\n\n- [Toggle](/components/toggle/code)\n- [Radio button](/components/radio-button/code)\n- [Form](/components/form/code)\n- _Data table (coming soon)_\n\n## Content\n\n#### Headings\n\nIf necessary, a heading can accompany a set of checkboxes to provide further context or clarity. Use sentence case for checkbox headings. In the example below, “IBM designers” would be the heading for the set of checkboxes.\n\n#### Labels\n\nAlways use clear and concise labels for checkboxes. Be explicit about the results that will follow if the checkbox is selected. Labels appear to the right of checkboxes.\n\n## Tables\n\nSee the [data table](/components/data-table/usage) section for guidance on how to use checkboxes within a table.\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/checkbox/usage.mdx"}}}}