Form

The Form component is a compound component written using React Hook Form.

Anatomy

<Form>
    <Form.Body>
        <Form.Section>
            <Form.SectionTitle />

            <Form.Field>
                <Form.InputLabel />
                <Form.InputText />
            </Form.Field>

            <Form.Field>
                <Form.InputLabel />
                <Form.InputEmail />
            </Form.Field>

            <Form.Field>
                <Form.InputCheckbox />
            </Form.Field>
        </Form.Section>
    </Form.Body>
    <Form.Footer>
        <Form.InputButton />
    </Form.Footer>
</Form>

Reference

Form

Contains all parts of the form. Form child components must be wrapped with this component.

Prop	Type	Default	Description
status	"enabled" / "disabled" / "loading"		The status of the form, usually inferred from the status of a react-query query
defaultValues	object		The default values of the form fields, as a key/value pair. The keys will match the input names given to each input. Default values should always be provided. See the React Hook Form Documentation.
onSubmit	function: (data) => void		The event handler for form submission.
onWatchFieldsChange	function: (fields) => void		The event handler for changes to form field values.

Body

A container for the form sections.

Prop	Type	Default	Description
direction	"row" / "column"	row	The flex-direction of the form sections

Section

An individual section inside the form. The flex-direction of the form fields inside a section is set to column by default.

Section Title

The title of a section.

<Form.Section>
    <Form.SectionTitle>My Section Title</Form.SectionTitle>
    ...
</Form.Section>

Field

An individual form field.

Prop	Type	Default	Description
direction	"row" / "column"	column	The flex-direction of the form field. A direction of column places an input label above an input field, and a direction of row places an input label before the field on the same row.

Footer

The form footer will usually contain the action buttons for the form, such as submit or reset/clear.

<Form.Footer>
    <Form.InputButton type='submit' value='Save' />
    <Form.InputButton type='reset' value='Clear' buttonTheme={buttonThemes.Secondary} />
</Form.Footer>

InputLabel

A label for any input field.

Prop	Type	Default	Description
htmlFor	string		Must match the name of the corresponding input.
label	string		The label copy.
required	boolean	false	Adds a red asterisk to the label to denote that the corresponding input is required.
tooltipCopy	string		Copy for an optional tooltip.
tooltipPosition	"top" / "right" / "bottom" / "left"		The placement of the tooltip popup.

InputText

A text input, equivalent to <input type='text' />.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputButton

A button input. Can be used to submit, reset, or any other action relevant to the form.

Prop	Type	Default	Description
value	string	Submit	The button copy.
type	"submit" / "button" / "reset"	submit	The primary function of the button.
buttonTheme	ButtonThemes	ButtonThemes.Primary	The button theme.
disabled	boolean	false	Manually disable the button.
loading	boolean		Set the button to loading.
onClick	function: () => void		The event handler for button click.

InputTextArea

A text input, equivalent to <textarea />.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputCheckbox

A checkbox input, equivalent to <input type='checkbox />. Note, the input label is included within this component.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
label	string		The input label copy.
tooltipCopy	string		Copy for an optional tooltip.
disabled	boolean		For manually disabling the form field.

InputNumber

A number input, equivalent to <input type='number' />

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputToggle

A toggle input. Note, the input label is included within this component.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
label	string		The input label copy.
defaultOn	boolean		Set the toggle to 'on' by default
disabled	boolean		For manually disabling the form field.

InputEmail

An email input, equivalent to <input type='email />`.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputPassword

A password input, equivalent to <input type='password' />.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputFileUpload

A file input, equivalent to <input type='file' />.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputDatePicker

A date picker input, equivalent to <input type='date' />.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputSelect

A dropdown input, equivalent to <select />.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
options	DropdownOption[]		An array of options in the format: { name: string, value: string}
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.
isMulti	boolean		Set to true to enable multi select.
onValueChange	function: (value) => void		The event handler for value change.

InputColourPicker

An input for selecting a colour from a predefined list of colours.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputSearch

A text input with search icon.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.

InputTag

A text input which adds inputted text as tags on enter press.

Prop	Type	Default	Description
name	string		The name of the input, used to register the input with React Hook Form.
placeholder	string		An optional placeholder for the input.
disabled	boolean		For manually disabling the form field.
validators	Validator[]		An array of validators to be applied to the form field.