{"componentChunkName":"component---src-pages-components-select-code-mdx","path":"/components/select/code/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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"]},"relativePagePath":"/components/select/code.mdx","titleType":"prepend","MdxNode":{"id":"af57b670-1520-55e3-824f-8b99e3c0143e","children":[],"parent":"d17cb47b-2d78-571d-872f-9be4749e08c0","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']\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\n## Documentation\n\n<ComponentDocs component=\"select\"></ComponentDocs>\n","type":"Mdx","contentDigest":"a9872b855ba13bcd91f89e853f95f51f","counter":1389,"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"]},"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']\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\n## Documentation\n\n<ComponentDocs component=\"select\"></ComponentDocs>\n","fileAbsolutePath":"/zeit/7c680545/src/pages/components/select/code.mdx"}}}}