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!');
        }}
    >
        <fieldset
            className="tf-form-field"
            role="presentation"
        >
            <div className="tf-form-field__container">
                <label
                    className="tf-form-field__label"
                    htmlFor="form-actions-example-message"
                >
                    Message
                </label>
                <textarea
                    id="form-actions-example-message"
                    rows={3}
                    placeholder="Your message here"
                    className="tf-input tf-input--bare tf-form-field__control"
                ></textarea>
                <fieldset
                    className="tf-form-field__faux"
                    aria-hidden="true"
                >
                    <legend className="tf-form-field__faux-label">
                        Message
                    </legend>
                </fieldset>
            </div>
        </fieldset>
        <div className="tf-form-actions">
            <button className="tf-button tf-button--raised tf-button--brand">
                Send
            </button>
        </div>
    </form>