PageForm

The PageForm is used to create forms for input by the user.

PageForm and the input components wrap PatternFly components using react-hook-form.

<Page>
  <PageLayout>
    <PageHeader />
    <PageForm>
      <PageFormInput... />
      <PageFormInput... />
      <PageFormInput... />
    </PageForm>
  </PageLayout>
</Page>

Inputs

PageFormTextInput

<PageFormTextInput
  name="name"
  label="Name"              
  placeholder="Enter name"
  isRequired
  minLength={10}
  maxLength={100}
  pattern={{ value: /^abc/, message: "... must start with 'abc'" }}
  validate={(value:string) => "some error string"}
/>

PageFormTextArea

<PageFormTextArea
  name="description"
  label="Description"              
  placeholder="Enter description"
  isRequired
  minLength={10}
  maxLength={100}
  pattern={{ value: /^abc/, message: "... must start with 'abc'" }}
  validate={(value:string) => "some error string"}
/>

Validation

Prop	Type	Description
isRequired	`boolean`	Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors object.
maxLength	`number`	The maximum length of the value to accept for this input.
minLength	`number`	The minimum length of the value to accept for this input.
max	`number`	The minimum value to accept for this input.
min	`number`	The minimum value to accept for this input.
pattern	`RegExp`	The regex pattern for the input.
validate	`Function` \| `Object`	You can pass a callback function as the argument to validate, or you can pass an object of callback functions to validate all of them. This function will be executed on its own without depending on other validation rules included in the required attribute.

Asynchronous validation

The validate function can return a promise for asynchronous validation.

<PageFormTextInput
  validate={async (value: string) => {
    try{
      const response = await fetch(...)
      if(response.status === 404) return "Not found"
    } catch(err) {
       return error?.message ?? "Unknown error"
    }
  }}
  ...
/>

Default error messages

Example: PageFormTextInput with a label of "Organization name"

Prop	Error message
isRequired	Organization name is required.
maxLength	Organization name cannot be greater than 100 characters.
minLength	Organization name must be at least 10 characters.

Custom error messages

Custom error messages can be provided by providing an object with a value and message.

<PageFormTextInput
  isRequired={{ value: true, message: "Some message" }}
  minLength={{ value: 10, message: "Some message" }}
  maxLength={{ value: 100, message: "Some message" }}
  ...
/>