Components

Form

Die Form-Component gruppiert Formularfelder und stellt einen Callback für das Absenden bereit. Sie ist ausschließlich in Kombination mit React Hook Form nutzbar.GitHub

Playground

import { useForm } from "react-hook-form";
import {
  Field,
  Form,
  ResetButton,
  SubmitButton,
} from "@mittwald/flow-react-components/react-hook-form";
import {
  ActionGroup,
  Label,
  Section,
  TextField,
} from "@mittwald/flow-react-components";

export default () => {
  interface Values {
    name: string;
  }
  const form = useForm<Values>();

  const handleSubmit = (values: Values) =>
    alert(JSON.stringify(values));

  return (
    <Form form={form} onSubmit={handleSubmit}>
      <Section>
        <Field
          name="name"
          rules={{
            required: "Bitte gib einen Namen ein",
          }}
        >
          <TextField>
            <Label>Name</Label>
          </TextField>
        </Field>
        <ActionGroup>
          <ResetButton>Zurücksetzen</ResetButton>
          <SubmitButton>Speichern</SubmitButton>
        </ActionGroup>
      </Section>
    </Form>
  );
}

Aktionen nach Submit

Aktionen, die nach dem Submit ausgeführt werden sollen – zum Beispiel ein Form-Reset oder einen Redirect – sollten im Return-Callback des Submit Handlers erfolgen. Dieser Callback kann auch asynchron sein.

Tab not found

The tab you tried to access no longer exists or you do not have permission to view it.

Overview