Custom fields

CompositeField

This field is a kind of a shortcut for few fields. You can also access all field props here, like value or onChange for some extra logic.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

CustomAutoField

These are two standard options to define a custom AutoField: either using connectField or simply taking the code from the original one (theme doesn't matter) and simply apply own components and/or rules to render components. Below an example with connectField.

// Remember to choose a correct theme package
import AutoField from 'uniforms-unstyled/AutoField';
const CustomAuto = props => {
// This way we don't care about unhandled cases - we use default
// AutoField as a fallback component.
const Component = determineComponentFromProps(props) || AutoField;
return <Component {...props} />;
};
const CustomAutoField = connectField(CustomAuto, {
ensureValue: false,
includeInChain: false,
initialValue: false
});
// You can also tell your `AutoForm`/`QuickForm`/`ValidatedQuickForm` to use it.
<AutoForm {...props} autoField={CustomAutoField} />;

CycleField

This field works as follows: iterate all allowed values and optionally no-value state if the field is not required. This one uses Semantic-UI.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

DisplayIf

This simple field component conditionally displays other fields based on input.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

RangeField

This field works as follows: two datepickers are bound to each other. Value is a {start, stop} object.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

RatingField

This field works as follows: render stars for each rating and mark them as filled, if rating (value) is greater.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

SubmitButton

This field works as follows: render standard submit field and disable it, when the form is invalid. It's a simplified version of a default SubmitField from uniforms-unstyled. We use schema from previous examples as a template for validation.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

SwapField

This field works as follows: on click of its child (refresh icon) it swaps values of fieldA and fieldB. It's that simple.

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema

ImageField

SemanticMaterialBootstrap3Bootstrap4AntDUnstyled
Show exampleShow source codeShow schema