Fields

Uniforms provide a set of predefined components that can be used as form fields.

The list below contains a guaranteed set of fields, implemented in every theme package:

ComponentDescription
AutoFieldAutomatically renders a given field.
AutoFieldsAutomatically renders given fields.
BoolFieldCheckbox.
DateFieldHTML5 datetime-local input.
ErrorFieldError message for a given field.
ErrorsFieldError message with a list of validation errors.
HiddenFieldHidden field (with a possibility to omit in DOM).
ListAddFieldAn icon with action to add a list item.
ListDelFieldAn icon with action to remove a list item.
ListFieldList of nested fields.
ListItemFieldSingle list item wrapper.
LongTextFieldTextarea.
NestFieldBlock of nested fields.
NumFieldNumeric input.
RadioFieldRadio checkbox.
SelectFieldSelect (or set of radio checkboxes).
SubmitFieldSubmit button.
TextFieldText (or any HTML5 compatible) input.

Fields

AutoField

AutoField is basically a field renderer - it will render a field of a type adequate to the one defined in the schema, according to the AutoField algorithm. You can also directly pass a component to it (by a component prop). All additional props will be passed to the result field component.

Props:
NameDefaultDescription
componentField according to the AutoField algorithmComponent to render
name-Name of the field in the schema

Note: All BaseField props are also accepted.

Props usage:
import { AutoField } from 'uniforms-unstyled';
<AutoField component={MyComponent} />;

AutoFields

AutoFields is basically a set of rendered AutoFields. By default, the rendered fields will be AutoFields in a chosen theme. However, you can replace the standard AutoField with a custom one through the autoField property. The element property defines a wrapping component. Eg. you want to group your fields inside a section, just do element="section". The default one is div.

Props:
NameDefaultDescription
autoFieldStandard AutoFieldAutoField Component to render
elementdivFields wrapper
fieldsAll schema fieldsList of fields to render
omitFields[]List of fields to omit
Props usage:
import { AutoFields } from 'uniforms-unstyled';
<AutoFields
autoField={MyAutoField}
element="section"
fields={['fieldA', 'fieldB']}
omitFields={['fieldA', 'fieldB']}
/>;

BaseField

You can't really render a BaseField because it doesn't have a render method. It's a base class of all packaged fields, so that all props below are available to All fields.

You can pass any prop but remember that passing onChange will "detach" the field from the form in some way - it won't change your form state. Also, passing any already provided prop - like id - will override the default one.

Props:
NameDefaultDescription
disabledfalseField disabled state. It's passed directly to the field, but it propagates same as the label.
labeltrueField label. This prop has three modes. If you pass a string, then it will be used as a label. If you pass a null, then it won't have a label, but nested fields will have default labels. If you pass a non-null falsy value, it won't have a label and nested fields won't have labels too.
name-Field name. Used for identification. It should match your schema - if not, it will throw an error.
placeholderfalseField placeholder. If set to true, then a label will be used. Otherwise, it's handled like a label (including propagation).
value-Field value. Every field accepts its specific value type only.
Props usage:
import { BaseField } from 'uniforms';
<BaseField
disabled={false}
label
name="field"
placeholder={false}
value={value}
/>;

BoolField

A checkbox.

Props:
NameDescriptionAvailable in
appearanceField appearance. Set to "toggle" to appear as a Material Toggle or to "checkbox" (or leave it undefined) to use a Checkbox appearance.material
extraExtra feedback text. In the antd theme, this renders addtional help text below any validation messages.antd
feedbackableField feedback state. Some description would be great, huh?bootstrap4
gridField layout. Bootstrap grid layout style. Number is an equivalent of {sm: n}. Object is a {mode: size} object. Complete string is simply passed through.bootstrap3, bootstrap4
helpHelp text. Some description would be great, huh?antd, bootstrap3, bootstrap4
helpClassNameHelp block className. Some description would be great, huh?bootstrap3, bootstrap4
inlineCheckbox inline state. In bootstrap themes, a label is rendered as a text but in inline mode, it's treated as a field label.bootstrap3, bootstrap4
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
labelBeforeLeft label. In bootstrap themes, label is rendered on the right side of a checkbox. This label is rendered above the field.bootstrap3, bootstrap4
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
wrapClassNameField and sourroundings wrap className. Some description would be great, huh?bootstrap3, bootstrap4
wrapperColField layout. The layout for input controls. Same as labelCol.antd

Note: All BaseField props are also accepted.

Props usage:
import { BoolField } from 'uniforms-unstyled';
<BoolField
appearance="checkbox" // Renders a material-ui Checkbox
appearance="toggle" // Renders a material-ui Toggle
extra="Extra Feedback or Help"
feedbackable
grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
grid={3} // 'col-3-sm' on label, 'col-9-sm' on input
grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
help="Need help?"
helpClassName="a b c"
inline
inputClassName="a b c"
inputRef={ref => {}}
labelBefore="Label"
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
showInlineError
wrapClassName="a b c"
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

DateField

Props:
NameDescriptionAvailable in
extraExtra feedback text. In the antd theme, this renders addtional help text below any validation messages.antd
feedbackableField feedback state. Some description would be great, huh?bootstrap4
gridField layout. Bootstrap grid layout style. Number is an equivalent of {sm: n}. Object is a {mode: size} object. Complete string is simply passed through.bootstrap3, bootstrap4
helpHelp text. Some description would be great, huh?antd,bootstrap3, bootstrap4
helpClassNameHelp block className. Some description would be great, huh?bootstrap3, bootstrap4
iconInput icon. Semantic inputs can have an icon. By default, it's placed on the right side - to place it on the left, use iconLeft prop instead.semantic
iconLeftSemantic inputs can have an icon. With this prop, it's placed on the left side - to place it on the right, use icon prop instead.semantic
iconPropsInput icon props. Semantic inputs can have an icon. These props are passed directly to the icon element.semantic
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
labelPropsProps for the InputLabelmaterial
maxMaximum value. Date object.All
minMinimal value. Date object.All
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
timeFormatDisplay time picker in ampm (12hr) format or 24hr format.material
wrapClassNameField and sourroundings wrap className. In SemanticUI theme, this class name is used on ui input wrapper, so you can pass classes like small, huge, inverted, transparent etc.bootstrap3, bootstrap4, semantic
wrapperColField layout. The layout for input controls. Same as labelCol.antd

Note: All BaseField props are also accepted.

Props usage:
import { DateField } from 'uniforms-unstyled';
<DateField
extra="Extra Feedback or Help"
feedbackable
grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
grid={3} // 'col-3-sm' on label, 'col-9-sm' on input
grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
help="Need help?"
helpClassName="a b c"
icon="user"
iconLeft="user"
iconProps={{onClick() {}}}
inputClassName="a b c"
inputRef={ref => {}}
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
labelProps={{shrink: true, disableAnimation: true}}
max={new Date(2100, 1, 1)}
min={new Date(2000, 1, 1)}
showInlineError
timeFormat="ampm"
wrapClassName="a b c"
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

ErrorField

Error message renderer.

Props:
NameDescription
childrenCustom content. By default, it will render a block with the error message (if any), but you can customize the content.
nameTarget field. This field error should be used.
Props usage:
import { ErrorField } from 'uniforms-unstyled';
<ErrorField children={children} name="field" />;

ErrorsField

Error messages renderer.

Props:
NameDescription
childrenCustom content. By default, it will render a block with the error messages (if any), but you can customize the content.
Props usage:
import { ErrorsField } from 'uniforms-unstyled';
<ErrorsField children={children} />;

HiddenField

Props:
NameDescription
nameField name. Used for identification. It should match your schema - if not, it will throw an error.
valueField value. This field has completely different semantics. When a value is set, then it's updating a current model instead of being passed to the field.
Props usage:
import { HiddenField } from 'uniforms-unstyled';
<HiddenField name="field" value={value} />;

ListAddField

Props:
NameDescriptionAvailable in
addIconIcon. By default, glyphicon is used.bootstrap3, bootstrap4

Note: All BaseField props are also accepted.
Note: This is one of internal components of ListField.

Props usage:
import { ListAddField } from 'uniforms-unstyled';
<ListAddField addIcon={<MyAddIcon />} />;

ListDelField

Props:
NameDescriptionAvailable in
removeIconIcon. By default, glyphicon is used.bootstrap3, bootstrap4

Note: All BaseField props are also accepted.
Note: This is one of internal components of ListField.

Props usage:
import { ListDelField } from 'uniforms-unstyled';
<ListDelField removeIcon={<MyRemoveIcon />} />;

ListField

Props:
NameDefaultDescriptionAvailable in
addIconglyphiconIcon. It's passed to the ListAddField.bootstrap3, bootstrap4
initialCount-Initial items count. At least this amount of fields will be rendered at the beginning.All
itemProps-ListItemField props. These props are passed to the ListItemField.All
removeIconglyphiconIcon. It's passed to the ListDelField.bootstrap3, bootstrap4
showInlineErrorField inline error. Some description would be great, huh?bootstrap3, bootstrap4, semantic

Note: All BaseField props are also accepted.

Props usage:
import { ListField } from 'uniforms-unstyled';
<ListField
addIcon={<MyAddIcon />}
initialCount={5}
itemProps={
{
/* ... */
}
}
removeIcon={<MyRemoveIcon />}
showInlineError
/>;

ListItemField

NameDefaultDescriptionAvailable in
removeIconglyphiconIcon. It's passed to the ListDelField.bootstrap3, bootstrap4

Note: All BaseField props are also accepted.
Note: This is one of internal components of ListField.

Props usage:
import { ListItemField } from 'uniforms-unstyled';
<ListItemField removeIcon={<MyRemoveIcon />} />;

LongTextField

A textarea.

Props:
NameDescriptionAvailable in
extraExtra feedback text. In the antd theme, this renders addtional help text below any validation messages.antd
gridField layout. Bootstrap grid layout style. Number is an equivalent of {sm: n}. Object is a {mode: size} object. Complete string is simply passed through.bootstrap3, bootstrap4
helpHelp text. Some description would be great, huh?antd, bootstrap3, bootstrap4
helpClassNameHelp block className. Some description would be great, huh?bootstrap3, bootstrap4
iconInput icon. Semantic inputs can have an icon. By default, it's placed on the right side - to place it on the left, use iconLeft prop instead.semantic
iconLeftSemantic inputs can have an icon. With this prop, it's placed on the left side - to place it on the right, use icon prop instead.semantic
iconPropsInput icon props. Semantic inputs can have an icon. These props are passed directly to the icon element.semantic
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inlineCheckbox inline state. In bootstrap themes, a label is rendered as a text but in inline mode, it's treated as a field label.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
labelBeforeLeft label. In bootstrap themes, label is rendered on the right side of a checkbox. This label is rendered above the field.bootstrap3, bootstrap4
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
wrapperColField layout. The layout for input controls. Same as labelCol.antd
wrapClassNameField and sourroundings wrap className. Some description would be great, huh?bootstrap3, bootstrap4

Note: All BaseField props are also accepted.

Props usage:
import { LongTextField } from 'uniforms-unstyled';
<LongTextField
extra="Extra Feedback or Help"
grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
grid={3} // 'col-3-sm' on label, 'col-9-sm' on input
grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
help="Need help?"
helpClassName="a b c"
icon="user"
iconLeft="user"
iconProps={{onClick() {}}}
inputClassName="a b c"
inputRef={ref => {}}
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
showInlineError
wrapClassName="a b c"
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

NestField

Props:
NameDescriptionAvailable in
fieldsArray of rendered fields. If no custom content provided, only those fields are rendered. By default, All of nested fields are rendered.All
groupedAdd / remove "grouped" class from the field. In Semantic, fields can be grouped using this class. By default, this class is added to the NestField.semantic
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic

Note: All BaseField props are also accepted.

Props usage:
import { NestField } from 'uniforms-unstyled';
<NestField fields={['fieldA', 'fieldB' /* ... */]} grouped showInlineError />;

NumField

A numeric input field.

Props:
NameDescriptionAvailable in
decimalDecimal mode. This will change value step from 1 to 0.01.All
extraExtra feedback text. In the antd theme, this renders addtional help text below any validation messages.antd
gridField layout. Bootstrap grid layout style. Number is an equivalent of {sm: n}. Object is a {mode: size} object. Complete string is simply passed through.bootstrap3, bootstrap4
helpHelp text. Some description would be great, huh?antd, bootstrap3, bootstrap4
helpClassNameHelp block className. Some description would be great, huh?bootstrap3, bootstrap4
iconInput icon. Semantic inputs can have an icon. By default, it's placed on the right side - to place it on the left, use iconLeft prop instead.semantic
iconLeftSemantic inputs can have an icon. With this prop, it's placed on the left side - to place it on the right, use icon prop instead.semantic
iconPropsInput icon props. Semantic inputs can have an icon. These props are passed directly to the icon element.semantic
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inlineCheckbox inline state. In bootstrap themes, a label is rendered as a text but in inline mode, it's treated as a field label.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
labelBeforeLeft label. In bootstrap themes, label is rendered on the right side of a checkbox. This label is rendered above the field.bootstrap3, bootstrap4
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
maxMaximum value. Date object.All
minMinimal value. Date object.All
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
stepInput step.All
wrapperColField layout. The layout for input controls. Same as labelCol.antd
wrapClassNameField and sourroundings wrap className. Some description would be great, huh?bootstrap3, bootstrap4

Note: All BaseField props are also accepted.

Props usage:
import { NumField } from 'uniforms-unstyled';
<NumField
decimal
extra="Extra Feedback or Help"
grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
grid={3} // 'col-3-sm' on label, 'col-9-sm' on input
grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
help="Need help?"
helpClassName="a b c"
icon="user"
iconLeft="user"
iconProps={{onClick() {}}}
inputClassName="a b c"
inputRef={ref => {}}
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
max={100}
min={10}
showInlineError
step={5}
wrapClassName="a b c"
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

RadioField

Props:
NameDescriptionAvailable in
allowedValuesArray of allowed values. By default, those are extracted from your schema.All
inlineCheckbox inline state. In bootstrap themes, a label is rendered as a text but in inline mode, it's treated as a field label.bootstrap3, bootstrap4
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
transformLabel transform. Allows to transform the each value into a human-readable labelAll
wrapperColField layout. The layout for input controls. Same as labelCol.antd

Note: All BaseField props are also accepted.

Props usage:
import { RadioField } from 'uniforms-unstyled';
<RadioField
allowedValues={[value1, value2 /* ... */]}
inline
inputClassName="a b c"
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
showInlineError
transform={value => label}
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

SelectField

Props:
NameDescriptionAvailable in
allowedValuesArray of allowed values. By default, those are extracted from your schema.All
appearanceField appearance. Set to "toggle" to appear as a Material Toggle or to "checkbox" (or leave it undefined) to use a Checkbox appearance.material
checkboxesTurn on checkbox/radio mode. It's always true in mutltiple (i.e. fieldType === Array) mode.All
extraExtra feedback text. In the antd theme, this renders addtional help text below any validation messages.antd
helpHelp text. Some description would be great, huh?antd, bootstrap3, bootstrap4
helpClassNameHelp block className. Some description would be great, huh?bootstrap3, bootstrap4
inlineCheckbox inline state. In bootstrap themes, a label is rendered as a text but in inline mode, it's treated as a field label.bootstrap3, bootstrap4
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
labelPropsProps for the InputLabelmaterial
optionsOptions. It is optional and using options will override transform and allowedValues. It can be either an object or an array (or a function, that returns it).All
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
transformLabel transform. Allows to transform the each value into a human-readable labelAll
wrapperColField layout. The layout for input controls. Same as labelCol.antd
wrapClassNameField and sourroundings wrap className. Some description would be great, huh?bootstrap3, bootstrap4

Note: All BaseField props are also accepted.

Props usage:
import { SelectField } from 'uniforms-unstyled';
<SelectField
allowedValues={[value1, value2 /* ... */]}
checkboxes
extra="Extra Feedback or Help"
help="Need help?"
helpClassName="a b c"
inline
inputClassName="a b c"
inputRef={ref => {}}
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
labelProps={{shrink: true, disableAnimation: true}}
options={[{label: 'Hi', value: value1}, {label: 'Hello', value: value1} /* ... */]}
showInlineError
transform={value => label} // Set of values that will be shown in the select.
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

SubmitField

Props:
NameDescriptionAvailable in
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
Props usage:
import { SubmitField } from 'uniforms-unstyled';
<SubmitField inputClassName="a b c" inputRef={ref => {}} />;

TextField

Props:
NameDescriptionAvailable in
extraExtra feedback text. In the antd theme, this renders addtional help text below any validation messages.antd
gridField layout. Bootstrap grid layout style. Number is an equivalent of {sm: n}. Object is a {mode: size} object. Complete string is simply passed through.bootstrap3, bootstrap4
helpHelp text. Some description would be great, huh?antd, bootstrap3, bootstrap4
helpClassNameHelp block className. Some description would be great, huh?bootstrap3, bootstrap4
iconInput icon. Semantic inputs can have an icon. By default, it's placed on the right side - to place it on the left, use iconLeft prop instead.semantic
iconLeftSemantic inputs can have an icon. With this prop, it's placed on the left side - to place it on the right, use icon prop instead.semantic
iconPropsInput icon props. Semantic inputs can have an icon. These props are passed directly to the icon element.semantic
inputClassNameInput wrapper class name. In bootstrap themes, passed className is used on field block. This is used on direct field wrapper.bootstrap3, bootstrap4
inputRefSetting ref prop to a field won't work as desired, because you'll receive a field component rather than an HTML input. If you need an input ref, use this prop instead.All
labelClassNameLabel className. A custom className for the field's label.bootstrap3, bootstrap4
labelColField layout. The layout of label. You can set span and/or offset.antd
showInlineErrorField inline error. Some description would be great, huh?antd, bootstrap3, bootstrap4, semantic
typeInput type. HTML compatible input type like password. Default is text.All
wrapperColField layout. The layout for input controls. Same as labelCol.antd
wrapClassNameField and sourroundings wrap className. Some description would be great, huh?bootstrap3, bootstrap4

Note: All BaseField props are also accepted.

Props usage:
import { TextField } from 'uniforms-unstyled';
<TextField
extra="Extra Feedback or Help"
grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
grid={3} // 'col-3-sm' on label, 'col-9-sm' on input
grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
help="Need help?"
helpClassName="a b c"
icon="user"
iconLeft="user"
iconProps={{onClick() {}}}
inputClassName="a b c"
inputRef={ref => {}}
labelClassName="a b c" // You can either specify them as a single string
labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
labelCol={{offset: 2}} // 'ant-col-offset-2' on label
labelCol={{span: 4}} // 'ant-col-4' on label
showInlineError
type="password" // Input type. HTML compatible input type like password. Default is text.
wrapClassName="a b c"
wrapperCol={{offset: 2}} // 'ant-col-offset-2' on field
wrapperCol={{span: 4}} // 'ant-col-4' on field
/>;

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.