{"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":"785901d9-0674-565f-a663-4c8b5214f06e","children":[],"parent":"0ddb79f8-5663-5fe4-b121-a10508f93022","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":"1f49174dd626bbf4f27be2fd9c89ef36","counter":1375,"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/3ed0734e/src/pages/components/select/code.mdx"}}}}