How to use @formiz/core - 10 common examples

export const LotOfFields = () => {
  const form = useForm();

  const handleSubmit = (values) => {
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(values, null, 2));
    form.invalidateFields({
      'name-0': 'You can display an error after an API call',
    });
    const stepWithError = form.getFieldStepName('name-0');
    form.goToStep(stepWithError);
  };

  return (

export const Wizard = () => {
  const form = useForm();

  const handleSubmit = (values) => {
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(values, null, 2));
    form.invalidateFields({
      name: 'You can display an error after an API call',
    });
    const stepWithError = form.getFieldStepName('name');
    form.goToStep(stepWithError);
  };

  return (

export const UseCase1 = () => {
  const form = useForm();

  const handleSubmit = (values) => {
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(values, null, 2));
    form.invalidateFields({
      'docker.image': 'You can display an error after an API call',
    });
    const stepWithError = form.getFieldStepName('docker.image');
    form.goToStep(stepWithError);
  };

  return (

export const Repeater = () => {
  const form = useForm();
  const [collection, setCollection] = useState(defaultCollection);

  useEffect(() => {
    setCollection(defaultCollection);
  }, [form.resetKey]);

  const handleSubmit = (values) => {
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(values, null, 2));
  };

  const addItem = () => {
    setCollection(c => [
      ...c,
      {
        id: uuidv4(),

export const AutoForm = () => {
  const form = useForm();

  const handleSubmit = (values) => {
    // eslint-disable-next-line no-alert
    alert(JSON.stringify(values, null, 2));
    form.invalidateFields({
      name: 'You can display an error after an API call',
    });
  };

  return (

export const ExposedPorts = () => {
  const form = useForm();
  const isDarkTheme = useDarkTheme();
  const [exposedPorts, setExposedPorts] = useState([]);

  useEffect(() => {
    setExposedPorts([]);
  }, [form.resetKey]);

  const addItem = () => {
    setExposedPorts(s => [
      ...s,
      {
        id: uuidv4(),
      },
    ]);
  };

export const MultiStepsLayout = ({
  form: externalForm,
  children,
  submitLabel = 'Submit',
  ...props
}) => {
  const internalForm = useForm();
  const form = externalForm || internalForm;
  const hasSteps = !!form.steps.length;

  return (
    
      
        <form novalidate="">
          {children}

          {hasSteps &amp;&amp; (
            
              {!form.isFirstStep &amp;&amp; (
                </form>

export const PageHeader = ({ children, onReset, githubPath }) => {
  const form = useForm();

  return (
    
      
        {children}
        <button> {
            form.reset();
            onReset();
          }}
          ml="auto"
          size="sm"
        &gt;
          Reset form
        </button>

export const Debug = () => {
  const form = useForm();

  return (
    
      
        # Debug - Form values
      
      {JSON.stringify(form.values, null, 2)}
    
  );
};

export const DockerImage = () => {
  const [isPrivate, setIsPrivate] = useState(false);
  const form = useForm();

  useEffect(() => {
    setIsPrivate(false);
  }, [form.resetKey]);

  return (
    
      
            Use
            {' '}