Form Actions
<zn-form-actions> | ZnFormActions
Standard action row for the bottom of a form. Renders a submit button by default; opt in to more with
with-cancel and with-reset.
Drops the standard action row into a form. The default is just a primary submit button — build it up with
with-cancel and with-reset as the form needs. Place it inside the form it should
act on.
<form> <zn-form-actions></zn-form-actions> </form>
Examples
With a Cancel Button
Use the with-cancel attribute to add a cancel button. When the form lives inside a dialog or
slideout, cancelling closes it; it also emits a zn-cancel event for the container to handle.
<zn-dialog trigger="form-actions-dialog" label="New Ticket"> <form> <zn-form-actions with-cancel></zn-form-actions> </form> </zn-dialog> <zn-button id="form-actions-dialog">Open Dialog</zn-button>
With a Reset Button
Use the with-reset attribute to add a button that resets the form’s fields.
<form> <input type="text" name="example" value="Change me, then reset"> <zn-form-actions with-reset></zn-form-actions> </form>
Custom Text and Icons
Each button’s text and icon can be overridden with submit-text / submit-icon,
cancel-text / cancel-icon and reset-text / reset-icon.
<form> <zn-form-actions with-cancel submit-text="Create Ticket" submit-icon="plus@lu" cancel-text="Discard" cancel-icon="trash-2@lu"></zn-form-actions> </form>
Extra Actions
Extra buttons placed in the default slot appear before the standard buttons.
<form> <zn-form-actions> <zn-button color="transparent">Preview</zn-button> </zn-form-actions> </form>
Targeting a Form by Id
When the component can’t live inside the form, point it at one with the form attribute.
<form id="standalone-form"></form> <zn-form-actions form="standalone-form"></zn-form-actions>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.107/dist/components/form-actions/form-actions.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.107/dist/components/form-actions/form-actions.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/form-actions/form-actions.js';
Slots
| Name | Description |
|---|---|
| (default) | Extra actions, placed before the buttons. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
submitText
submit-text
|
The submit button’s text. |
string
|
'Save'
|
|
submitIcon
submit-icon
|
The submit button’s icon. |
string
|
'check@lu'
|
|
withCancel
with-cancel
|
Adds a cancel button. Closes the containing dialog or slideout, if any, and emits
zn-cancel.
|
boolean
|
false
|
|
cancelText
cancel-text
|
The cancel button’s text. |
string
|
'Cancel'
|
|
cancelIcon
cancel-icon
|
The cancel button’s icon. |
string
|
'x@lu'
|
|
withReset
with-reset
|
Adds a reset button that resets the form. |
boolean
|
false
|
|
resetText
reset-text
|
The reset button’s text. |
string
|
'Reset'
|
|
resetIcon
reset-icon
|
The reset button’s icon. |
string
|
'rotate-ccw@lu'
|
|
form
|
The id of the form to act on. If omitted, the closest containing form is used. |
string
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
zn-cancel |
|
Emitted when the cancel button is clicked. | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
cancel-button |
The cancel button. |
reset-button |
The reset button. |
submit-button |
The submit button. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-button><zn-example><zn-icon><zn-tooltip>