Custom submit button

[marco-gonella]

Great job with this project!
I'm trying to use it with svelte and velte kit and it seems that customizing submit button is not supported yet, this can be a good enhancement to make it more customizable.

[JulianCataldo]

Hello, and thank you :D
Good idea. We might be able to customise the text, button variant or size in a pinch (via the element API), for convenience.

In the meantime, it's possible to:

Disable the submit button, make your own + hook it up with the form. Maybe I would need to expose the <form> DOMElement reference (it's #private for now). E.g. .submitButton=${false}

https://github.com/json-schema-form-element/jsfe/blob/32f9f7dd5034788c0eb82e130481a9c197f538ce/packages/form/src/json-schema-form.ts#L416C12-L416C12

---

jsfe/packages/form/src/json-schema-form.ts

Line 53 in 32f9f7d

@property({ type: Boolean }) public submitButton = true;

Or you can override the widget altogether

jsfe/packages/form/src/json-schema-form.ts

Line 400 in 32f9f7d

this.widgets?.submit?.(options) ??

This is the Shoelace one:

https://github.com/json-schema-form-element/jsfe/blob/main/packages/shoelace/src/widgets/submit.ts

---

Please note the widgets API is still pretty crude, it needs a tad of re-work
#6

[JulianCataldo]

Customising the label is now possible.

<json-schema-form
    submitButtonLabel="Submit me!"
></json-schema-form>

Also in Widget['submit']'s options:

jsfe/packages/types/src/widgets.ts

Line 149 in 7483287

submit?: Widget<{ id?: string; label?: string }>;

Available in:

 - @jsfe/carbon => 0.1.5-next.3+7483287
 - @jsfe/form => 0.3.2-next.3+7483287
 - @jsfe/material => 0.2.3-next.3+7483287
 - @jsfe/shoelace => 0.3.2-next.3+7483287
 - @jsfe/spectrum => 0.1.3-next.3+7483287
 - @jsfe/system => 0.2.3-next.3+7483287
 - @jsfe/wired => 0.2.3-next.3+7483287