{"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","Accessibility"]},"relativePagePath":"/components/select/code.mdx","titleType":"prepend","MdxNode":{"id":"51f7e8d7-c702-5716-a85f-0d1bc7c877ff","children":[],"parent":"52edfe1d-ae7f-5c9d-aef2-605095915cde","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\n## Documentation\n\n<ComponentDocs component=\"select\"></ComponentDocs>\n","type":"Mdx","contentDigest":"838effd0b7c24b1af743bdb4515fe2c5","counter":1576,"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\n## Documentation\n\n<ComponentDocs component=\"select\"></ComponentDocs>\n","fileAbsolutePath":"/zeit/3e77a1c8/src/pages/components/select/code.mdx"}}}}