{"componentChunkName":"component---src-pages-components-select-code-mdx","path":"/components/select/code/","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/code.mdx","titleType":"prepend","MdxNode":{"id":"c70d6814-8dd8-5f28-b4d5-e0ed66ed2ff7","children":[],"parent":"b3247737-71ce-551d-9313-872d0e8b44fc","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<ComponentCode\n  name=\"Select\"\n  component=\"select\"\n  variation=\"select\"\n  hasReactVersion=\"select--default\"\n  hasLightVersion\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default\"\n  hasAngularVersion=\"?path=/story/select--basic\"\n  codepen=\"oOxzmZ\"\n/>\n<ComponentCode\n  name=\"Select with helper text\"\n  component=\"select\"\n  variation=\"select--helpertext\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-helper%20text=helpful%20text\"\n  codepen=\"wZGzZY\"\n/>\n\n<ComponentCode\n  name=\"Select invalid\"\n  component=\"select\"\n  variation=\"select--invalid\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-invalid%20message=Invalid selection\"\n  codepen=\"MRyjMg\"\n/>\n\n<ComponentCode\n  name=\"Inline select\"\n  component=\"select\"\n  variation=\"select--inline\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-inline=true\"\n  hasAngularVersion=\"?path=/story/select--basic&knob-Theme=dark&knob-Display=inline\"\n  codepen=\"qwZaer\"\n/>\n<ComponentCode\n  name=\"Inline select with helper text\"\n  component=\"select\"\n  variation=\"select--helpertextinline\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-inline=true&knob-helper%20text=helpful%20text\"\n  codepen=\"VNammQ\"\n/>\n\n## Inline select invalid\n\n<ComponentCode\n  name=\"Inline select invalid\"\n  component=\"select\"\n  variation=\"select--inlineinvalid\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-inline=true&knob-invalid%20message=Invalid selection\"\n  codepen=\"ZZWBLQ\"></ComponentCode>\n","type":"Mdx","contentDigest":"48a94c47129c12f2d202f237a6ce1293","counter":1565,"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<ComponentCode\n  name=\"Select\"\n  component=\"select\"\n  variation=\"select\"\n  hasReactVersion=\"select--default\"\n  hasLightVersion\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default\"\n  hasAngularVersion=\"?path=/story/select--basic\"\n  codepen=\"oOxzmZ\"\n/>\n<ComponentCode\n  name=\"Select with helper text\"\n  component=\"select\"\n  variation=\"select--helpertext\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-helper%20text=helpful%20text\"\n  codepen=\"wZGzZY\"\n/>\n\n<ComponentCode\n  name=\"Select invalid\"\n  component=\"select\"\n  variation=\"select--invalid\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-invalid%20message=Invalid selection\"\n  codepen=\"MRyjMg\"\n/>\n\n<ComponentCode\n  name=\"Inline select\"\n  component=\"select\"\n  variation=\"select--inline\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-inline=true\"\n  hasAngularVersion=\"?path=/story/select--basic&knob-Theme=dark&knob-Display=inline\"\n  codepen=\"qwZaer\"\n/>\n<ComponentCode\n  name=\"Inline select with helper text\"\n  component=\"select\"\n  variation=\"select--helpertextinline\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-inline=true&knob-helper%20text=helpful%20text\"\n  codepen=\"VNammQ\"\n/>\n\n## Inline select invalid\n\n<ComponentCode\n  name=\"Inline select invalid\"\n  component=\"select\"\n  variation=\"select--inlineinvalid\"\n  hasReactVersion=\"select--default\"\n  hasVueVersion=\"select--default&knob-inline=true&knob-invalid%20message=Invalid selection\"\n  codepen=\"ZZWBLQ\"></ComponentCode>\n","fileAbsolutePath":"/zeit/45b021a8/src/pages/components/select/code.mdx"}}}}