-{"description":"\nThis is a helper component that is used by most of the custom form\ncomponents. In most cases it shouldn't be used directly.\n\n```js\n---\ntype: example\n---\n<div>\n <FormField id=\"_foo121\" label=\"Stacked layout\" width=\"400px\" layout=\"stacked\"\n messages={[{type:'success', text: 'This is a success message'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>\n <TextInput id=\"_foo121\"/>\n </FormField>\n test\n <hr/>\n <FormField id=\"_foo122\" label=\"Stacked layout (inline=true)\" width=\"400px\" layout=\"stacked\" inline\n messages={[{type:'success', text: 'This is a success message'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>\n <TextInput id=\"_foo122\"/>\n </FormField>\n test\n <hr/>\n <FormField id=\"_foo123\" label=\"Inline layout\" width=\"400px\" layout=\"inline\"\n messages={[{type:'success', text: 'success!'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>\n <TextInput id=\"_foo123\"/>\n </FormField>\n test\n <hr/>\n <FormField id=\"_foo124\" label=\"Inline layout (inline=true)\" width=\"400px\" layout=\"inline\" inline\n messages={[{type:'success', text: 'success!'}, {type:'newError', text: 'An error message. It will wrap if the text is longer than the width of the container.'}]}>\n <TextInput id=\"_foo124\"/>\n </FormField>\n test\n <hr/>\n <FormField id=\"_foo121\" label={<ScreenReaderContent>hidden text</ScreenReaderContent>} width=\"400px\" layout=\"stacked\">\n <TextInput id=\"_foo121\" />\n </FormField>\n test\n <hr/>\n</div>\n```\n","displayName":"FormField","methods":[{"name":"handleRef","docblock":null,"modifiers":[],"params":[{"name":"el","optional":false,"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]}}],"returns":null}],"props":{"label":{"required":true,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"id":{"required":true,"tsType":{"name":"string"},"description":"the id of the input (to link it to its label for a11y).\nApplied as the `for` HTML prop on the label."},"messages":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{\n type: FormMessageType\n text: FormMessageChild\n}","signature":{"properties":[{"key":"type","value":{"name":"union","raw":"| 'newError'\n| 'error'\n| 'hint'\n| 'success'\n| 'screenreader-only'","elements":[{"name":"literal","value":"'newError'"},{"name":"literal","value":"'error'"},{"name":"literal","value":"'hint'"},{"name":"literal","value":"'success'"},{"name":"literal","value":"'screenreader-only'"}],"required":true}},{"key":"text","value":{"name":"ReactReactNode","raw":"React.ReactNode","required":true}}]}}],"raw":"FormMessage[]"},"description":"Array of objects with shape: `{\n text: React.ReactNode,\n type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']\n}`"},"messagesId":{"required":false,"tsType":{"name":"string"},"description":"id for the form field messages"},"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""},"inline":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"layout":{"required":false,"tsType":{"name":"union","raw":"'stacked' | 'inline'","elements":[{"name":"literal","value":"'stacked'"},{"name":"literal","value":"'inline'"}]},"description":"","defaultValue":{"value":"'stacked'","computed":false}},"labelAlign":{"required":false,"tsType":{"name":"union","raw":"'start' | 'end'","elements":[{"name":"literal","value":"'start'"},{"name":"literal","value":"'end'"}]},"description":"","defaultValue":{"value":"'end'","computed":false}},"vAlign":{"required":false,"tsType":{"name":"union","raw":"'top' | 'middle' | 'bottom'","elements":[{"name":"literal","value":"'top'"},{"name":"literal","value":"'middle'"},{"name":"literal","value":"'bottom'"}]},"description":"","defaultValue":{"value":"'middle'","computed":false}},"width":{"required":false,"tsType":{"name":"string"},"description":""},"inputContainerRef":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(element: HTMLSpanElement | null) => void","signature":{"arguments":[{"type":{"name":"union","raw":"HTMLSpanElement | null","elements":[{"name":"HTMLSpanElement"},{"name":"null"}]},"name":"element"}],"return":{"name":"void"}}},"description":""},"elementRef":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(element: Element | null) => void","signature":{"arguments":[{"type":{"name":"union","raw":"Element | null","elements":[{"name":"Element"},{"name":"null"}]},"name":"element"}],"return":{"name":"void"}}},"description":"provides a reference to the underlying html root element"},"margin":{"required":false,"tsType":{"name":"Spacing"},"description":"Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing)."}},"category":"components","relativePath":"packages/ui-form-field/src/FormField/v1/index.tsx","extension":".tsx","srcPath":"packages/ui-form-field/src/FormField/v1/index.tsx","srcUrl":"https://github.com/instructure/instructure-ui/tree/master/packages/ui-form-field/src/FormField/v1/index.tsx","packageName":"@instructure/ui-form-field","requirePath":"@instructure/ui-form-field/lib/FormField/v1/index","requireStr":"require('/home/runner/work/instructure-ui/instructure-ui/packages/ui-form-field/src/FormField/v1/index.tsx').default","esPath":"@instructure/ui-form-field/es/FormField/v1/index","id":"FormField","title":"FormField","componentVersion":"v1","componentDirName":"FormField"}
0 commit comments