Interface FormFieldProps<ComponentProps, Component>

Specific behaviour/configuration this form field should conform to.

Type Parameters

Hierarchy

  • FormFieldProps

Properties

as autocomplete? children? defaultValue? disabled? error? id inputProps? label? placeholder? required? schema? setValue? validate? value?

Properties

as

as: ComponentType<ComponentProps>

Optional autocomplete

autocomplete?: FormInputAutocomplete

Instructs the browser how to autocomplete this field.

See

Example

{
     type: FormInputAutocompleteTypes.CURRENT_PASSWORD
}

Optional children

children?: ReactNode

Optional defaultValue

defaultValue?: string

Prefilled value for the field. This will be passed to the component you pass.

Optional disabled

disabled?: boolean

Whether this field is disabled. The value will still be sent to onSubmit.

Default

false

Optional error

error?: null | string

Supply your own error message if needed.

id

id: string

Unique ID for this field.

Required

Optional inputProps

inputProps?: Component extends ComponentType<P> ? P : ComponentProps

Optional label

label?: string

Textual label for this field. It's recommended to keep this for accessibility.

Optional placeholder

placeholder?: string

Provide an example or specific instructions to the user, or use this as a less accessible but sometimes cleaner label.

Example

"Enter an email address"

Optional required

required?: boolean

Whether this field is required from a user.

Default

false

Optional schema

schema?: Partial<LengthValidator & StringValidator>

Basic schema for the value.

Example

{ // length must be greater than 3
     gt: 3
}

Optional setValue

setValue?: ((value: string) => void)

Type declaration

    • (value: string): void

    • Parameters

      • value: string

      Returns void

Optional validate

validate?: ((value: string) => void)

Type declaration

    • (value: string): void

    • Custom function to validate the input. The function must throw an error or it will be assumed the value passes validation.

      Example

      (value) => {
           if (value === 'wrong') throw "Incorrect answer."
      }

      Parameters

      • value: string

      Returns void

Optional value

value?: string

Settings

Member Visibility

Theme

Generated using TypeDoc