FormFooter

Expected Kyber 14 Changes

• The alignment of the buttons in the footer will change from 'end' to 'start' (left-aligned) in Kyber v14. Please consider setting the align prop to 'start' to prepare for this change.

Presentation component for form footer.

Secondary button

To show the secondary button in the footer you need to provide a function to the onSecondaryButtonClick prop to the Form component.

Result

Loading...

Live Editor

function Example() {
	const [value, setValue] = React.useState('');

	const handleChange = (event, payload) => {
		setValue(payload.value);
	};

	const handleSubmit = (event) => {
		event.preventDefault();
		console.log('form submitted');
	};

	const handleSecondaryButtonClick = (event) => {
		console.log('secondary button clicked');
	};

	return (
		<form onSubmit={handleSubmit}>
			<TextField label="Label" name="form-demo-textfield" onChange={handleChange} value={value} />
			<FormFooter onSecondaryButtonClick={handleSecondaryButtonClick} />
		</form>
	);
}

Change footer button text

You can change the text in the footer buttons by using the secondaryButtonContents and submitButtonContents props on the Form.

Result

Loading...

Live Editor

function Example() {
	const [value, setValue] = React.useState('');

	const handleChange = (event, payload) => {
		setValue(payload.value);
	};

	const handleSubmit = (event) => {
		event.preventDefault();
		console.log('form submitted');
	};

	const handleSecondaryButtonClick = (event) => {
		console.log('secondary button clicked');
	};

	return (
		<form onSubmit={handleSubmit}>
			<TextField label="Label" name="form-demo-textfield" onChange={handleChange} value={value} />
			<FormFooter
				onSecondaryButtonClick={handleSecondaryButtonClick}
				secondaryButtonContents="Custom secondary button text"
				submitButtonContents="Submit button text"
			/>
		</form>
	);
}

Props