Form Contexts

This package contains some helpers for creating forms in React.

Form Validation

Links together the validation of every input in a form, requiring every input to be valid for the form itself to be valid.

• FormProvider: Wraps every component in a form, providing the context used by the form validation hooks

• useFormValidity: Returns the validity of the form - if any input is invalid, false is returned, otherwise it returns true

• useInputValidity: Links an input's validity to the form, so that if this input is invalid the entire form will be

useInputState

A hook that provides common things needed for an input, providing validation (with ValidationProvider support) and support for using the ID generated by an IdProvider. It also handles abstraction for the onChange event to pass the value string instead of the event itself.

Input & Label Validation Linking

Allows a label to access the validation state of its input.

• ValidationProvider: Wraps both the input and the label to allow them to communicate

• useValidation: Returns the validation result of the input that is also under the provider

• useValidationSuspense: Same as the above hook, except it suspends if the validation is in the loading state so that you always get a complete validation returned

• useValidationUpdate: Updates the validation result that useValidation returns. If you are using useInputState, it handles this for you.

• useInitialValidationUpdate: Updates the validation result until the next time useValidationUpdate stops loading.

Shared IDs

Allows a label to access the ID of the input that it is for.

• IdProvider: Wraps both the input and the label to allow them to communicate

• useLocalId: Returns the ID generated by the provider. In an input, this should be set as its id (if you are using useInputState, it handles this for you), and in a label it should be set as its htmlFor property.

Inline Input Items

Allows inline items for an input to be specified as siblings to the input component

• InlineGroup: Wraps the input and the inline items to provide the required context

• useInlineItems: Returns the left and right inline items if they are set

• useInlineItem: Sets the inline item component for one of the sides