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.

SemanticMUIBootstrap4Bootstrap5AntDUnstyled
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,
});

const CustomAutoFieldDetector = () => {
return CustomAutoField;
};

<AutoField.componentDetectorContext.Provider value={CustomAutoFieldDetector}>
<Application />
</AutoField.componentDetectorContext.Provider>;

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.

SemanticMUIBootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

DisplayIf

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

SemanticMUIBootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

ImageField

SemanticMUIBootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema

RangeField

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

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

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

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

SemanticMUIBootstrap4Bootstrap5AntDUnstyled
Show exampleShow source codeShow schema