Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA settings form made of titled sections and label-and-control rows, with a save bar that slides in when there are unsaved changes.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
status | "idle" | "dirty" | "saving" | "saved" | "idle" | Save state. Any value other than idle shows the save bar. |
onSave | () => void | - | Called when the form is submitted. |
onDiscard | () => void | - | Called when Discard is pressed. Reset your own state here. |
dirtyMessage | string | "You have unsaved changes" | Text next to the buttons while dirty. |
saveLabel | string | "Save changes" | Label of the save button. |
label | string | "Settings" | Accessible name of the form. |
Also accepts all <form> props.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Section heading. Also names the section for assistive technology. |
description | string | - | One line under the heading. |
Also accepts all <section> props.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Setting name. |
description | string | - | What the setting does. |
htmlFor | string | - | Id of the control, so the label is clickable. |
stacked | boolean | false | Put the control under the label. Good for wide inputs. |
Also accepts all <div> props.
status from your own state.