Widget Types

type	React-Toolbox Component / tags	Notes
text, password, email, tel, number	Input with type=formField.type	data-react-toolbox=input. If type is not specified in Form Field Metadata, string and number/integer data types will use this by default, except if Data Property Schema declares an enum.
textarea	Input multiline=true	data-react-toolbox=input
date	Datepicker autoOk=true; inputFormat is the localeDateString	data-react-toolbox=datepicker. min/max in Form Field Metadata are used to specify the min/max allowed dates in theDatepicker. These strings are parsed with sugar and support strings like "today" or "3 weeks from today". IMPORTANT: server.get provided to FormStore must return dates as Date objects not strings as they are typically stored in JSON.
select	Dropdown	data-react-toolbox=dropdown. If type is not specified in Form Field Metadata, string data types that declare an enum in Data Property Schema will use this by default. Can be used with string, number or boolean data type with an enum or by specifying the options in titleMap in metadata.
radios	RadioGroup with RadioButtons	Can be used with string, number or boolean data type with an enum or by specifying the options in titleMap in Form Field Metadata.
checkbox (**)	Checkbox	The value is expected to be a boolean (null/undefined will become false). If type is not specified in Form Field Metada, boolean data types will use this by default.
switch (*) (**)	Switch followed by <abbr> with desription.	The value is expected to be a boolean (null/undefined will become false). The optional shown label will be the value of the first item in titleMap in Form Field Metadata when the value is true and the second item when the value is false (this reverse sequence is to make it easy to not have a label when it's off).
link (*) (**)	Link	The value is expected to be a boolean. The text in the link will be the value of the first item in titleMap in Form Field Metadata when the value is false and the second item when the value is true (this is the reverse of a switch!). Clicking on the link will toggle the value.
range (*)	<abbr> with description followed by Slider and then tickMarkLabels in unstyled(!) OL/LI tags if step is specified in Form Field Metadata .	data-react-toolbox=slider. The default value determination follows HTML5 range spec and sets it in the middle between min and max if specified in Form Field Metadata, falling back to minimum and maximum in Data Property Schema. You can override the default in either location. In Form Field Metadata, set tickLabelsStep to 0 to disable them or set it to 2 to render a label every other step tick (currently requires max-min to be even).
autocomplete, multiselect	Autocomplete	data-react-toolbox=autocomplete. Value can be either a string, number or array of strings or numbers. The source values (options) are specified in titleMap in Form Field Metadata - note that titleMap uses a different format than what the React-Toolbox Autocomplete field expects and this widget performs the necessary conversion. Multiple selection is enabled if the widget type is multiselect or the data property type is array.
array, textsuggest, tBoolean, tuple	Unimplemented!	But see autocomplete/multiselect
help	<div> with HTML from description	HTML is placed using dangeourslySetInnerHTML
fieldset	<fieldset> with <legend> if title is defined containing title in H4 and description in H5.	Places fields that should be inside the fieldset in the items property of Form Field Metadata object for the fieldset. It does not need a corresponding schema object.
fieldWrapper (*)	<DL data-field-type=rt-type data-checked=true/false><DD>title *</DD><DT>field</DT></DL>	This widget type should not be used in Form Field Metadata for any field. See below. data-checked is present only for checkbox and switch widgets in v1.12+

* = 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):

import { MobxSchemaForm, FieldWrapper } from 'mobx-schema-form';

const mapper = { fieldWrapper: FieldWrapper };

<MobxSchemaForm mapper={mapper} ...... />

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):

prop	Data type	Description
children	React element	One of the above widgets
formField	formShape	The Form Field Metadata object for the field, including title, type, required, etc. When a field is considered required in the schema, the default FieldWrapper will place <span className="SchemaField__required" > *</span> after the title in the DT tag.
className	String	CSS class name(s) to be placed on the top-level tag of the wrapping structure - in the case of the default FieldWrapper - on the DL tag. This will come from className property in the Form Field Metadata.
hasError	Boolean	True when the field is in error (i.e. there is something in the dataErrors object for this field). The default FieldWrapper adds a SchemaField--error class to the DL tag when this is true.
checked	Boolean	For checkbox and switch widgets, contains a boolean that indicates whether the widget is checked/on. (NEW in v.1.12)
fieldType	String	One of the bold data-react-toolbox= React-Toolbox widget short names in the table above (i.e. input, datepicker, dropdown, slider). The default FieldWrapper puts this into a data-field-type attribute on the DL tag, falling back to formField.type for other widgets (i.e. radios, checkbox, switch, link).

For styling with the FieldWrapper see Styling with the FieldWrapper.