Input component
An input component
is an input wrapper that adapts an actual input component to the Formulaik api.
Name | Condition | Type | Mandatory | Default value |
---|---|---|---|---|
item | Struct containing informations for this field. See below. | string | false | string |
value | The current value of the current field. | object | false | {} |
readOnly | Array of validation payloads. Read more | boolean | false | false |
disabled | Whether the form or the current field is disabled | boolean | false | false |
onValueChanged | Validates the value as a valid URL via a regex. Read more | boolean | false | false |
Item
| Name | Condition | Type | Mandatory | Default value |
| id
| The unique id for this input. Useful for setting default values and recuperating the value on submission. Read more | string
| true
| N/A
|
| label
| The label to display on top of the input component. Read more| string
| false
| |
| params
| Pass-through parameters used for customizations. Read more | object
| false
| {}
|
Example
import React from 'react'
import FormControlLabel from '@mui/material/FormControlLabel'
import Checkbox from '@mui/material/Checkbox'
export default (props) => {
const {
onValueChanged,
disabled,
readOnly,
value,
item: {
label,
id,
params
}} = props
return <div className="">
<FormControlLabel control={
<Checkbox
color="default"
disabled={disabled}
readOnly={readOnly}
{...params}
checked={value}
onChange={({ target: { checked } }) => {
onValueChanged(checked)
}}
/>}
label={params.label ? params.label : label} />
</div>
}
This component adapts a Google Material UI (Mui) Switch input to Formulaik. It is available as a free community components library on Github.
- It forwards the
disabled
and thereadOnly
states to the Mui component - It forwards the rest of the
params
the Mui component for a pass-through customization - It binds the current
value
the Mui component propchecked
- It binds the Formulaik provided
onValueChanged
to the Mui component proponChange
By doing these simple bindings and forwarding, this component has now a minimal Formulaik compatibility and can be used on any Formulaik form that references a component library that includes this component.