FormSubmit

A focused submit control for AppForm, with a visible label and shared button styling.

FormSubmit

View source · API reference

Submit a meaningful value

The button triggers the form’s submit event, including when the user submits from the text field.

<RegorApp id="form-submit-demo" src="./playground.ts"/>
import {
  defineButtonComponents,
  defineFlexComponents,
  defineFormComponents,
  defineFormInputField,
  definePanelComponents,
} from '@purestack/ts-components'

import { createApp, defineComponent, html, type Ref, ref } from 'regor'

export interface FormSubmitExample {
  releaseTitle: Ref<string>
  savedTitle: Ref<string>
  submit: (event: Event) => void
}

const formSubmitExampleTemplate = html`<Panel bodyClass="p-4">
  <AppForm @submit.prevent="submit">
    <FormInputField
      id="submit-title"
      label="Release title"
      name="release"
      :model="releaseTitle"
      :required="true"
    />
    <FormSubmit label="Save release title" tone="accent" />
    <FormStatus tone="success" :hidden="!savedTitle">
      Saved locally: {{ savedTitle }}
    </FormStatus>
  </AppForm>
</Panel>`

function createFormSubmitExample(): FormSubmitExample {
  const releaseTitle = ref('Preview release')
  const savedTitle = ref('')
  return {
    releaseTitle,
    savedTitle,
    submit: (event) => {
      const form = event.target as HTMLFormElement
      if (form.reportValidity()) savedTitle(releaseTitle())
    },
  }
}

const component = defineComponent<FormSubmitExample>(
  formSubmitExampleTemplate,
  {
    context: createFormSubmitExample,
  },
)

createApp(
  {
    components: {
      FormSubmitExample: component,

      ...defineFlexComponents(),
      ...definePanelComponents(),
      ...defineButtonComponents(),
      ...defineFormComponents(),
      ...defineFormInputField(),
    },
  },
  { selector: 'app#form-submit-demo', template: html`<FormSubmitExample />` },
)

Choose the action emphasis

The disabled fieldset keeps this visual comparison from triggering a form action.

Submit treatments 
<fieldset disabled class="p-3">
  <legend>Submit treatments</legend>
  <Flex wrap="true">
    <FormSubmit label="Save changes" tone="accent" />
    <FormSubmit label="Request review" tone="neutral" variant="outline" />
  </Flex>
</fieldset>

Behavior and accessibility

FormSubmit renders Btn with type submit. Put submission logic on the form to support keyboard submission and multiple submit paths. Use a complete label; this component has no default content slot.

API reference

FormSubmit contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

label

RefOrValue<string>
Default
not set

Visible label. Use language that describes the control or value in its surrounding context.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
solid

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

Composition

No slots. Register defineFormComponents and defineButtonComponents. Use Btn type="submit" directly when you need its wider API, such as disabled or icons.