Skip to main content

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.

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

CustomAutoField#

Note: Since v3.1, the preferred way is to create an AutoField component is to use the createAutoField helper. Also, it's often the case that using the AutoField.componentDetectorContext is enough.

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';
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} name="" />;
};
const CustomAutoField = connectField(CustomAuto, {
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.

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

DisplayIf#

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

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

ImageField#

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

RangeField#

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

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
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.

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
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.

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
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.

SemanticMaterialBootstrap3Bootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema