woocommerce/packages/js/components/src/form
Maikel David Pérez Gómez 6b3056422e
Align the field height across the whole form (#35720)
2022-11-25 11:58:38 -03:00
..
stories Add DateTimePickerControl Form stories and tests (#34964) 2022-10-18 15:06:04 -04:00
test Add DateTimePickerControl Form stories and tests (#34964) 2022-10-18 15:06:04 -04:00
README.md Add/32 react provider to form component (#34082) 2022-08-04 11:14:16 -03:00
form-context.ts Fix/unsaved prompt (#35657) 2022-11-22 11:56:27 -03:00
form.tsx Fix/unsaved prompt (#35657) 2022-11-22 11:56:27 -03:00
index.ts Add/32 react provider to form component (#34082) 2022-08-04 11:14:16 -03:00
style.scss Align the field height across the whole form (#35720) 2022-11-25 11:58:38 -03:00

README.md

Form

A form component to handle form state and provide input helper props.

Usage

const initialValues = { firstName: '' };

<Form onSubmit={ ( values ) => {} } initialValues={ initialValues }>
	{ ( { getInputProps, values, errors, handleSubmit } ) => (
		<div>
			<TextControl
				label={ 'First Name' }
				{ ...getInputProps( 'firstName' ) }
			/>
			<Button
				isPrimary
				onClick={ handleSubmit }
				disabled={ Object.keys( errors ).length }
			>
				Submit
			</Button>
		</div>
	) }
</Form>;

Usage with FormContext

const initialValues = { firstName: '' };

const Field = () => {
	const formProps = useFormContext< { foo: string } >();

	return <input type="text" { ...formProps.getInputProps<string>( 'firstName' ) } />
}

<Form
	onSubmit={ ( values ) => {} }
	initialValues={ initialValues }
>
	{ ( {
		errors,
		handleSubmit,
	} ) => (
		<div>
			<Field />
			<Button
				isPrimary
				onClick={ handleSubmit }
				disabled={ Object.keys( errors ).length }
			>
				Submit
			</Button>
		</div>
	) }
</Form>

To see the properties available within useFormContext() check out the FormContext type here.

Props

Name Type Default Description
children * null A renderable component in which to pass this component's state and helpers. Generally a number of input or other form elements
errors Object {} Object of all initial errors to store in state
initialValues Object {} Object key:value pair list of all initial field values
onSubmit Function noop Function to call when a form is submitted with valid fields
validate Function noop A function that is passed a list of all values and should return an errors object with error response
touched Object {} This prop helps determine whether or not a field has received focus
onChange Function null A function that receives the value of the input; called when selected items change, whether added, edited, or removed