Skip to content

IForm.md

Latest commit

 

History

History
155 lines (89 loc) · 3.55 KB

IForm.md

File metadata and controls

155 lines (89 loc) · 3.55 KB

@hoststack/ui v0.2.0

@hoststack/ui / components / IForm

Interface: IForm

Defined in: components.ts:355

Form component props - form wrapper with validation and submission handling

Examples

// Boolean validity and arg-less submission (backward compatible)

<Form
  name="userForm"
  submit="Submit"
  submitValid={isFormValid}
  submitFunction={() => doSubmit()}
>
  <Input name="email" type="email" />
</Form>

// Function validity and data-aware submission

<Form
  name="userForm"
  submit="Save"
  submitValid={(data) => Boolean(data.email)}
  submitFunction={(data) => saveEmail(String(data.email))}
>
  <Input name="email" type="email" />
</Form>

Extends

  • ComponentPropsWithRef<"form">

Properties

children

children: ReactNode

Defined in: components.ts:357

Form content and input elements

Overrides

ComponentPropsWithRef.children

css?

optional css: CSS

Defined in: components.ts:359

Custom CSS styles

disabled?

optional disabled: boolean

Defined in: components.ts:361

Whether the form is disabled

id?

optional id: string

Defined in: components.ts:363

HTML id attribute for the form

Overrides

ComponentPropsWithRef.id

listen?

optional listen: boolean

Defined in: components.ts:365

Whether to listen for form validation events

loading?

optional loading: boolean

Defined in: components.ts:367

Whether the form is in a loading/submitting state

name

name: string

Defined in: components.ts:369

Name attribute for the form (required)

Overrides

ComponentPropsWithRef.name

submit?

optional submit: string

Defined in: components.ts:371

Text for the submit button

submitFunction

submitFunction: (data) => unknown | () => unknown

Defined in: components.ts:377

Function to call when form is submitted. If it declares parameters, it will receive a plain object of form data (name/value pairs). If it declares no parameters, it's called with no args (backward compatible).

submitValid?

optional submitValid: boolean | (data) => boolean

Defined in: components.ts:383

Form validity. Can be a boolean or a function that receives current form data and returns a boolean.