Widget Types
* = widget / feature not present in react-schema-form
** = widget does not reserve the same height as regular inputs and may be overlapped by next field preventing clicks on it. Use a fieldWrapper with appropriate CSS if your form uses these widgets.
FieldWraper
In order to style and position elements within some of the more complex widgets like the range/Slider as well as to display field titles either above or to the left of each field, it's convenient to wrap each field (other than help and fieldset) in a wrapping HTML structure. To do this, all you need to do is specify a fieldWrapper React component/function in the mapper object passed to MobxSchemaForm. To use the default one (with unstyled(!) html structure shown above):
IMPORTANT: All built-in widget types except help and fieldset and all custom widgets that use asSchemaField HOC will be wrapped in this FieldWrapper.
FieldWrapper will be passed the following props (by asSchemaField() HOC):
For styling with the FieldWrapper see Styling with the FieldWrapper.
Last updated