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> ); }

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> ); }

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