<Field>
I've got no strings, to hold me down...
Use this when wrapping HTML input components or your own custom input components.
It will pass them props such as change handlers, the current field value, and error messages.
<Field />
does not use render props. It clones your child component instead.
With a standard HTML input
:
Or with Material UI's TextField
:
Material UI does something weird with its props, so while it works fine with Field
, it will throw errors in the console. To avoid those errors, we've added a MaterialUiField
export.
Props
Prop Name | Prop Type | Description |
| Node | A single component. |
| Boolean | Checkboxes have a slightly different syntax where the |
| Boolean |
This prop is required for non-HTML multi-selects. |
| Function | Passes the returned props to Provides render-props-like behavior in a memoizable callback function. Most projects may need to create their own |
Child props
Props taken from the child element
Prop Name | Prop Type | Description |
| String | The identifier used by OneForm's states. |
| Function | If you pass this into your component, |
| Function | If you pass this into your component, |
| String | Only used for checkboxes and radio buttons. Required for radio buttons. |
Props given to a child HTML element
Field
passes different props if given an HTML element instead of component.
Prop Name | Prop Type | Description |
| Boolean | Used by checkboxes and radio buttons. |
| Boolean | Signals there's at least one error on the field. |
| Boolean | Signals the field has been visited. |
| String | The field name without the |
| Function | Callback expecting a standard |
| Function | Callback expecting a standard |
| Any | Value of the given field name. |
Props given to a child component
By default, Field
passes a wide assortment of props. If these cause errors in your components (like they did with Material UI), then create a new Field
variant for your project that passes the translateProps
prop. This allows you to configure how you'd like to name and use these props.
A single project can have multiple Field
variants if the need arises; although, the default Field
component handles many use cases. Typically, you'll only need one variant, but if you have many input components written without unified prop naming, then custom field wrappers are invaluable.
Another benefit to having input wrappers like Field
is they decouple your input components from OneForm.
Prop Name | Prop Type | Description |
| Boolean | Used by checkboxes and radio buttons. |
| Boolean | Signals the field has been visited. |
| Boolean | Denotes at least one error exists for this field name. |
| Array[String] | An array of error message strings. |
| Array[String] | An array of error message strings. |
| Boolean | Denotes a radio or checkbox is checked. |
| Boolean | Signals the field has been visited. |
| Boolean | Signals the field has been visited. |
| Boolean | Signals the field has been visited. |
| String | The field name without the |
| Function | Callback expecting a standard |
| Function | Callback expecting a standard |
| Boolean | Signals the field has been visited. |
| Any | Value of the given field name. |
| Boolean | Signals the field has been visited. |
Caveats
Your input can be any component, but it absolutely needs a name
prop. Field
can't work without it.
You need to also have component at least needs these props to update the value:
onChange
value
Without these props, your custom input won't receive updates from OneForm.
To get around this limitation, you can create your own <Field />
component with useField
.
Password fields
In the event you want a text box that doesn't show any text, I you could leave off the value
prop 👍.
Checkbox Validation Issue
OneForm supports checkbox fields no problem, except when you want to validate using a checkbox.
The way it works today, if you check a checkbox, it's considered "visited".
If you want to validate without first checking the checkbox, you'd have to create your own <CheckboxField />
component using useField
.
Your custom field component needs to call setVisited
when the component mounts.
Last updated