{"componentChunkName":"component---src-pages-components-content-switcher-usage-mdx","path":"/components/content-switcher/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","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":"74cf7031-bf94-5dba-9851-0b2e1d5ff58a","children":[],"parent":"24a68cd2-d544-5383-8c9b-6f99bd68d8ff","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) 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":"fa7ab2ed49753f712f4e2c368aaa675f","counter":1106,"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) 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":"/tmp/42b44a0/src/pages/components/content-switcher/usage.mdx"}}}}