Fields

AutoField algorithm

let component = props.component;
if (component === undefined) {
if (props.allowedValues) {
if (props.checkboxes && props.fieldType !== Array) {
component = RadioField;
} else {
component = SelectField;
}
} else {
switch (props.fieldType) {
case Date:
component = DateField;
break;
case Array:
component = ListField;
break;
case Number:
component = NumField;
break;
case Object:
component = NestField;
break;
case String:
component = TextField;
break;
case Boolean:
component = BoolField;
break;
}
invariant(component, 'Unsupported field type: %s', props.fieldType.toString());
}
}

Guaranteed props

Note: These are not the only props that a field will receive - these are guaranteed for all fields created with connectField helper.

NameTypeDescription
changedboolHas field changed?
disabledboolIs field disabled?
errorobjectField scoped part of validation error.
errorMessagestringField scoped validation error message.
fieldobjectField definition from schema.
fieldsarrayOf(string)Subfields names.
fieldTypefuncField type.
findErrorfunc(name)Request another field error.
findFieldfunc(name)Request another field field.
findValuefunc(name)Request another field value.
idstringField id - given or random.
labelstringField label.
namestringField name.
onChangefunc(value, [name])Change field value.
parentobjectParent field props.
placeholderstringField placeholder.
valueanyField value.

Props propagation

Few props propagate in a very special way. These are label, placeholder and disabled.

Example:

<TextField /> // default label | no placeholder
<TextField label="Text" /> // custom label | no placeholder
<TextField label={false} /> // no label | no placeholder
<TextField placeholder /> // default label | default placeholder
<TextField placeholder="Text" /> // default label | custom placeholder
<NestField label={null}> // null = no label but the children have their labels
<TextField />
</NestField>
<NestField label={false}> // false = no label and the children have no labels
<TextField />
</NestField>
<ListField name="authors" disabled> // Additions are disabled...
<ListItemField name="$" disabled> // ...deletion too
<NestField disabled={false} name=""> // ...but editing is not.
<TextField name="name" />
<NumField name="age" />
</NestField>
</ListItemField>
</ListField>

Note: label, placeholder and disabled are cast to Boolean before being passed to nested fields.