Skip to main content

Form Actions

About Form Actions​

The Form Actions are used to group the form specfic actions at the bottom of the form. It's responsible for the correct spacing and alignment of the actions to each other and to the form fields.

Example​

Result
Loading...
Live Editor
<form
    onSubmit={(event) => {
        event.preventDefault();
        alert('Form submitted!');
    }}
>
    <FormField
        id="form-actions-example-message"
        labelText="Message"
    >
        <Input
            multiline
            rows={3}
            placeholder="Your message here"
        />
    </FormField>
    <FormActions>
        <Button
            type="submit"
            typeStyle="raised"
            variationStyle="brand"
        >
            Send
        </Button>
    </FormActions>
</form>