{"componentChunkName":"component---src-pages-components-content-switcher-usage-mdx","path":"/components/content-switcher/usage/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Content switcher","description":"Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/content-switcher/usage.mdx","titleType":"prepend","MdxNode":{"id":"f0341115-9612-5c5b-937b-7b9b348e46cd","children":[],"parent":"113052cf-3d5b-543d-9039-33b8375cc4fd","internal":{"content":"---\ntitle: Content switcher\ndescription: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Content switcher_ manipulates the content shown following an exclusive or “either/or” pattern.\nIt is used to toggle between two or more content sections within the same space on screen. Only one section can be shown at a time.\n\n#### Text\n\nBe concise and specific. Titles have a max of two words.\n\n#### Default selection\n\nBased on usage, there should be a default selection. The default selection is always the first option in a switcher.\n\n## Related components\n\n#### Content switcher vs. toggle\n\nThe content switcher is used for large groups of content, as opposed to the [toggle](/components/toggle/code) which is meant for a “yes/no” or “on/off” binary decision.\n\n<Row>\n<Column colLg={8}>\n\n![content switcher example](images/content-switcher-usage-1.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"89db3c3665172dc87a40539ade2a4a46","counter":1323,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Content switcher","description":"Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Content switcher\ndescription: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Content switcher_ manipulates the content shown following an exclusive or “either/or” pattern.\nIt is used to toggle between two or more content sections within the same space on screen. Only one section can be shown at a time.\n\n#### Text\n\nBe concise and specific. Titles have a max of two words.\n\n#### Default selection\n\nBased on usage, there should be a default selection. The default selection is always the first option in a switcher.\n\n## Related components\n\n#### Content switcher vs. toggle\n\nThe content switcher is used for large groups of content, as opposed to the [toggle](/components/toggle/code) which is meant for a “yes/no” or “on/off” binary decision.\n\n<Row>\n<Column colLg={8}>\n\n![content switcher example](images/content-switcher-usage-1.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/content-switcher/usage.mdx"}}}}