ActionForm
A single-button POST form whose SubmitButton shows pending only for its own submission.
Examples
Row action
Each form arms its own button on submit; only an armed button follows its frame's reloadStart/reloadComplete. Another row's submit or a sidebar link leaves it idle.
<ActionForm
action={routes.dashboard.servers.refresh.href({ id })}
fields={{ return_to: serversHref }}
resetScroll="manual"
variant="ghost"
size="sm"
icon="refresh"
pendingLabel="Refreshing…"
>
Refresh
</ActionForm>SubmitButton in a longer form, pending
Pending keeps the icon slot, swaps it for a spinner and shows the pending label. It is aria-disabled, never disabled.
<form method="post" action={routes.dashboard.servers.update.href({ id })}>
{/* fields */}
<SubmitButton icon="check" pendingLabel="Saving…">Save changes</SubmitButton>
</form>Usage
import { ActionForm, SubmitButton } from '@switchboard/ui'
<ActionForm action={refreshHref} fields={{ return_to: listHref }} icon="refresh" pendingLabel="Refreshing…">
Refresh
</ActionForm>Props
Every component also takes mix, for css() and mixins applied after its own style.
ActionForm
| Prop | Type | Default | Description |
|---|---|---|---|
| action* | string | – | Where the form posts. |
| fields | Record<string, string> | – | Hidden fields, e.g. { return_to }. |
| document | boolean | – | data-rmx-document: a full page submission (cross-origin redirects). Pending then starts on submit and resets on pageshow. |
| resetScroll | 'manual' | – | data-rmx-reset-scroll: keep the scroll position after the response. |
| formAttributes | Props<"form"> | – | Extra attributes for the form (id, data-*). |
Every SubmitButton prop is passed to its button.
SubmitButton
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | – | The label. |
| pendingLabel | string | – | Shown and announced (polite live region) while pending: "Saving…". |
| pending | boolean | – | Start pending. Normally unset: the form submission drives it. |
A Button with type="submit". variant, size, icon, iconOnly, block, name, value, form and aria-label work as on Button.
Accessibility
- Pending sets aria-busy and aria-disabled but never disabled, so focus stays on the button and its name/value still post.
- The pending label is announced through a polite live region; aria-busy alone is not announced.
- A second submit of the same form is cancelled while pending.
Guidance
Do
- Use one ActionForm per row action.
- Write the pending label as a present participle: "Refreshing…".
Don’t
- Set disabled on submitters or fieldsets before a submission.
- Show pending for every form on the page.