Form group

Code

A container for form elements that has a built-in label, required/optional indicators, error messages, and layout options

Framework

HTML

React

Angular

Default

Toggle dark mode

<certara-form-group label="Label">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Label">
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Label">
  <certara-input name="example"></certara-input>
</certara-form-group>

Label slot

The custom slot allows rich formatting instead of being limited to strings

Custom label slot

Toggle dark mode

<certara-form-group>
  <span slot="label-slot">
    Custom label
    <code>slot</code>
  </span>
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup>
  <span slot="label-slot">
    Custom label
    <code>slot</code>
  </span>
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group>
  <span slot="label-slot">
    Custom label
    <code>slot</code>
  </span>
  <certara-input name="example"></certara-input>
</certara-form-group>

Help slot

Help text slot here

Toggle dark mode

<certara-form-group label="Label">
  <span slot="help">
    Help text
    <code>slot</code>
    here
  </span>
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Label">
  <span slot="help">
    Help text
    <code>slot</code>
    here
  </span>
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Label">
  <span slot="help">
    Help text
    <code>slot</code>
    here
  </span>
  <certara-input name="example"></certara-input>
</certara-form-group>

Error

Toggle dark mode

<certara-form-group label="Label" error="Custom error message">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Label" error="Custom error message">
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Label" error="Custom error message">
  <certara-input name="example"></certara-input>
</certara-form-group>

Required

Toggle dark mode

<certara-form-group label="Label" show-required="true">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Label" showRequired={true}>
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Label" show-required="true">
  <certara-input name="example"></certara-input>
</certara-form-group>

Optional

Toggle dark mode

<certara-form-group label="Test" show-optional="true">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Test" showOptional={true}>
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Test" show-optional="true">
  <certara-input name="example"></certara-input>
</certara-form-group>

Hide label

Toggle dark mode

<certara-form-group label="Hidden label" hide-label="true">
  <certara-input name="example" placeholder="The label is hidden, but still accessible">
  </certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Hidden label" hideLabel={true}>
  <CertaraInput name="example" placeholder="The label is hidden, but still accessible">
  </CertaraInput>
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Hidden label" hide-label="true">
  <certara-input name="example" placeholder="The label is hidden, but still accessible">
  </certara-input>
</certara-form-group>

Variant

Fieldset

Use the fieldset variant to use the fieldset/legend semantic pattern. This is useful for patterns with a shared heading for multiple checkbox or radio controls.

First option Second option Third option

Toggle dark mode

<certara-form-group label="Legend for group of options" variant="fieldset">
  <certara-radio layout="stacked" name="radio-example">First option</certara-radio>
  <certara-radio layout="stacked" name="radio-example">Second option</certara-radio>
  <certara-radio layout="stacked" name="radio-example">Third option</certara-radio>
</certara-form-group>

import { CertaraFormGroup, CertaraRadio } from '@certara/certara-ui-react';

<CertaraFormGroup label="Legend for group of options" variant="fieldset">
  <CertaraRadio layout="stacked" name="radio-example">First option</CertaraRadio>
  <CertaraRadio layout="stacked" name="radio-example">Second option</CertaraRadio>
  <CertaraRadio layout="stacked" name="radio-example">Third option</CertaraRadio>
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Legend for group of options" variant="fieldset">
  <certara-radio layout="stacked" name="radio-example">First option</certara-radio>
  <certara-radio layout="stacked" name="radio-example">Second option</certara-radio>
  <certara-radio layout="stacked" name="radio-example">Third option</certara-radio>
</certara-form-group>

Group (default)

Toggle dark mode

<certara-form-group label="Group" variant="group">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Group" variant="group">
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Group" variant="group">
  <certara-input name="example"></certara-input>
</certara-form-group>

Layout

Horizontal

Toggle dark mode

<certara-form-group label="Horizontal" layout="horizontal">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Horizontal" layout="horizontal">
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Horizontal" layout="horizontal">
  <certara-input name="example"></certara-input>
</certara-form-group>

Horizontal with help

With help text

Toggle dark mode

<certara-form-group label="Horizontal" layout="horizontal" show-required="true">
  <span slot="help">With help text</span>
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Horizontal" layout="horizontal" showRequired={true}>
  <span slot="help">With help text</span>
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Horizontal" layout="horizontal" show-required="true">
  <span slot="help">With help text</span>
  <certara-input name="example"></certara-input>
</certara-form-group>

Horizontal with error

With help text

Toggle dark mode

<certara-form-group label="Horizontal" layout="horizontal" show-optional="true" error="Error message">
  <span slot="help">With help text</span>
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Horizontal" layout="horizontal" showOptional={true} error="Error message">
  <span slot="help">With help text</span>
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Horizontal" layout="horizontal" show-optional="true" error="Error message">
  <span slot="help">With help text</span>
  <certara-input name="example"></certara-input>
</certara-form-group>

Stacked (default)

Toggle dark mode

<certara-form-group label="Stacked">
  <certara-input name="example"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Stacked">
  <CertaraInput name="example" />
</CertaraFormGroup>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Stacked">
  <certara-input name="example"></certara-input>
</certara-form-group>

certara-form-group

Properties

error

Attribute	error
Type	string
Default	''
Required	false
Description	Returns formatted error messages related to the field

groupId

Attribute	group-id
Type	string
Default	undefined
Required	false
Description	Custom ID for the group element (used for aria-labelledby relationship)

hideLabel

Attribute	hide-label
Type	boolean
Default	false
Required	false
Description	Will visually hide the label

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	Label that represents the form control

layout

Attribute	layout
Type	"horizontal" | "stacked"
Default	'stacked'
Required	false
Description	Place label adjacent to input controls, or stack them vertically

showOptional

Attribute	show-optional
Type	boolean
Default	false
Required	false
Description	Indicator that a field is optional. If both showRequired and showOptional are true, showRequired will take precedence.

showRequired

Attribute	show-required
Type	boolean
Default	false
Required	false
Description	Indicator that a field is required

variant

Attribute	variant
Type	"fieldset" | "group"
Default	'group'
Required	false
Description	Render container as a fieldset or as a div

Events

There are no events available for this component

Methods

Name	Signature	Description
getLabelId	() => Promise<string>	Returns the label element’s ID for aria-labelledby association
setFormControlId	(id: string) => Promise<void>

Slots

Name	Description
	Main content for help block
help	Additional descriptive text for the form-group
label-slot	Slot that supplements label attribute if rich content is required