{"componentChunkName":"component---src-pages-components-select-code-mdx","path":"/components/select/code/","webpackCompilationHash":"c31bf13abf12c5c2789b","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":"232f71b6-decb-5d72-913a-2c2e4c05bffe","children":[],"parent":"157789d7-bc56-5b0a-80b7-3adae7258b8b","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":"acd9ce40c85bc6e64c958dbba11525d9","counter":1371,"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/7d243b86/src/pages/components/select/code.mdx"}}}}