C&C Docs
Log in

cnc-form

A form wrapper that intercepts the native submit and re-emits it as an event, plus an error banner gated on one property. It renders a real <form> — which is what separates it from cnc-custom-form.

Quick start

Put fields in the default slot and handle submit. The native submit is PREVENTED, so the page never navigates — the event detail hands you the host element to read values from.

not submitted

<cnc-form $error="err" @submit="save($event.detail.form)">
  <cnc-input name="email" label="Email"></cnc-input>
  <cnc-button submit>Submit</cnc-button>
</cnc-form>

Usage guidance

Read the values off $event.detail.form. The event hands you the host rather than form data, so a new FormData(...) over the inner form, or reading your own bound state, is how values come out — the widget collects nothing for you.

Put the busy state on the BUTTON. The form's own processing does nothing, and cnc-button's disables the control and shows a spinner in one move, which is the behaviour you wanted anyway.

Use cnc-custom-form when you deliberately do NOT want a real form — no native submit, no validation, no Enter-to-submit. Use this one when those native behaviours help. That is the whole difference between the two.

← Back to Widgets