Form Control

Each input field in Formium React is wrapped with a a Form Control component that is responsible for rendering the label, help text / description, and error messages (if they exist). Its children are where input components (such as TextInput, Radio/RadioGroup, Checkbox, etc.) will be rendered at runtime.

Here's the most basic implementation.

const FormControl = React.memo(function FormControl({
  children,
  description,
  error,
  label,
  labelFor,
}) {
  return (
    <div>
      {label && <label htmlFor={labelFor}>{label}</label>}
      {description && <div>{description}</div>}
      {children}
      {error && <div>{error}</div>}
    </div>
  );
});
const components = {
  FormControl
}
// ...and then elsewhere
<FormiumForm components={components} />

Props

interface FormControlProps @formium/react

Props	Description
`children`	`React.ReactNode` React children. This is where actual field implementation will be rendered.
`description`	`React.ReactNode` Optional helper text.
`disabled`	`boolean` Whether field should appear as non-interactive. Remember that `input` elements must be disabled separately. Required
`error`	`React.ReactNode` Error message (if present) and the current field has been visited, otherwise this will be undefined.
`label`	`React.ReactNode` Label of this field.
`labelFor`	`string` `id` attribute of the field that this `FormControl` controls, used as `<label htmlFor>` attribute.
`required`	`boolean` Whether field is required Required

Was this page helpful?

PreviousFormium Form NextText input

Form Control

Props

Build forms, without the tears.

Product

Resources

Legal