Form

Code

Component to wrap form fields with built-in error messaging

Framework HTML React Angular

Default

Click Submit button to see error message

Submit

Toggle dark mode

<certara-form method="POST" preventDefault="true">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

import { CertaraButton, CertaraForm, CertaraFormGroup, CertaraInput } from '@certara/certara-ui-react';

<CertaraForm method="POST" preventDefault={true}>
  <CertaraFormGroup label="Name" showRequired>
    <CertaraInput name="reqd" required />
  </CertaraFormGroup>
  <CertaraButton className="mt-6" type="submit">Submit</CertaraButton>
</CertaraForm>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form method="POST" preventDefault="true">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

Error description

Click Submit button to see error message

Submit

Toggle dark mode

<certara-form method="POST" preventDefault="true" global-error-description="Custom description">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

import { CertaraButton, CertaraForm, CertaraFormGroup, CertaraInput } from '@certara/certara-ui-react';

<CertaraForm method="POST" preventDefault={true} globalErrorDescription="Custom description">
  <CertaraFormGroup label="Name" showRequired>
    <CertaraInput name="reqd" required />
  </CertaraFormGroup>
  <CertaraButton className="mt-6" type="submit">Submit</CertaraButton>
</CertaraForm>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form method="POST" preventDefault="true" global-error-description="Custom description">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

Error headline

Click Submit button to see error message

Submit

Toggle dark mode

<certara-form method="POST" preventDefault="true" global-error-headline="Custom headline">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

import { CertaraButton, CertaraForm, CertaraFormGroup, CertaraInput } from '@certara/certara-ui-react';

<CertaraForm method="POST" preventDefault={true} globalErrorHeadline="Custom headline">
  <CertaraFormGroup label="Name" showRequired>
    <CertaraInput name="reqd" required />
  </CertaraFormGroup>
  <CertaraButton className="mt-6" type="submit">Submit</CertaraButton>
</CertaraForm>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form method="POST" preventDefault="true" global-error-headline="Custom headline">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

Hide global error

Click Submit button to see error message

Submit

Toggle dark mode

<certara-form method="POST" preventDefault="true" show-global-error="false">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

import { CertaraButton, CertaraForm, CertaraFormGroup, CertaraInput } from '@certara/certara-ui-react';

<CertaraForm method="POST" preventDefault={true} showGlobalError={false}>
  <CertaraFormGroup label="Name" showRequired>
    <CertaraInput name="reqd" required />
  </CertaraFormGroup>
  <CertaraButton className="mt-6" type="submit">Submit</CertaraButton>
</CertaraForm>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form method="POST" preventDefault="true" show-global-error="false">
  <certara-form-group label="Name" show-required>
    <certara-input name="reqd" required></certara-input>
  </certara-form-group>
  <certara-button class="mt-6" type="submit">Submit</certara-button>
</certara-form>

certara-form

Properties

globalErrorDescription

Attribute	global-error-description
Type	string
Default	DEFAULT_GLOBAL_ERROR_DESCRIPTION
Required	false
Description	Body of error banner

globalErrorHeadline

Attribute	global-error-headline
Type	string
Default	DEFAULT_GLOBAL_ERROR_HEADLINE
Required	false
Description	Headline of error banner

preventDefault

Attribute	prevent-default
Type	boolean
Default	false
Required	false
Description	Stop default form submission behavior. Necessary for server validation and custom form submission behavior via javascript

showGlobalError

Attribute	show-global-error
Type	boolean
Default	true
Required	false
Description	Option to disable error banner

Events

Name	Description	Bubbles
certaraCustomValidate	Emitted when field-level errors are applied programmatically (e.g. via setInputErrors); detail carries the errors map keyed by input name.	true
certaraSubmit	Emitted when the form passes constraint validation on submit; detail contains the underlying HTMLFormElement.	true
certaraValidate	Emitted when submit is attempted but the form fails constraint validation, so child inputs can show or hide error messages.	true

Methods

Name	Signature	Description
setGlobalError	(headline: string, description: string) => Promise<void>	Method to programatically set the global error. Useful for passing global errors for server validation
setInputErrors	(errors: ErrorObj) => Promise<void>	Method to pass errors down to inputs in the form. The errors object schema should be { formInputName: ‘error message’ }
setIsInvalid	(isInvalid: boolean) => Promise<void>	Method to programatically set the invalidity state of the form. Useful for dealing with server side form validation.

Slots

There are no slots available for this component