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 the readOnly 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 prop checked
• It binds the Formulaik provided onValueChanged to the Mui component prop onChange 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.