‍

Components

Integrations

Form

Die Form-Component gruppiert Formularfelder, nutzbar nur mit React Hook Form.
GitHub‍Markdown‍
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 ein Redirect – sollten im Return-Callback des Submit Handlers erfolgen. Dieser Callback kann auch asynchron sein.

Properties

PropertyTypeDefaultDescription
autoResetboolean | FormAutoResetOptionstrueWhen the form is reset to its default values. `true` resets it after the surrounding modal has closed, `false` never resets it.
form (required)UseFormReturn<F>-The react-hook-form instance returned by `useForm()`.
formComponentFC<Omit<FormComponentType, "ref">>-The component rendered as the form element. Use it to render the form with a routers form component. Defaults to a plain `<form />`.
isReadOnlybooleanfalseWhether all fields of the form can be read but not edited.
submitController{ submit: { (): Promise<void>; set(newSubmitHandler: () => void | Promise<void>): void; extend(submitController: ...): ...; }; }-A controller to submit the form from outside of it.

Events

PropertyTypeDefaultDescription
onSubmit (required)FormOnSubmitHandler<F>-Called with the validated form values when the form is submitted. Returning a promise keeps the submit button pending until it settles.

Accessibility

PropertyTypeDefaultDescription
aria-describedbystring-Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hiddenBooleanish-Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-labelstring-Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledbystring-Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite