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).
array Unimplemented! Will actually fall-back to whatever is built into react-schema-form and won't work. :-(
help <div> with HTML from description Used from react-schema-form as-is. Doesn't support mobxCondition.
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><DD>title *</DD><DT>field</DT></DL> This widget type should not be used in Form Field Metadata for any field. See below.

* = 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.
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.

results matching ""

    No results matching ""