Checkbox

A checkbox allows the user to toggle between checked and unchecked states. Formium React will automagically group checkbox inputs together on your behalf in the Checkboxes field and bind them to an array value equivalent to the list of selected options.

Used by

• Checkboxes
• Yes/No (coming soon)

Props

This component should be an HTML checkbox input (or equivalent). On/off is determined through the checked prop instead of value. value is used for the string or number value of the input.

const Checkbox = ({ label, value, name, id, checked, onChange, ...props }) => {
  return (
    <label>
      <input
        type="checkbox"
        id={id}
        name={name}
        checked={checked}
        value={value}
        onChange={onChange}
        {...props}
      />
      {label}
    </label>
  );
};
const components = {
  Checkbox
}
// ...and then elsewhere
<FormiumForm components={components} />

This component should support the full range of HTML <input> props.