Input groups

Show design guidelines

Code

Text fields can include elements before and after the input using the prepend and append slots.

Framework HTML React Angular

Append

Button

Toggle dark mode

<certara-input placeholder="Enter value">
  <certara-button slot="append">Button</certara-button>
</certara-input>

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

<CertaraInput placeholder="Enter value">
  <CertaraButton slot="append">Button</CertaraButton>
</CertaraInput>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Enter value">
  <certara-button slot="append">Button</certara-button>
</certara-input>

Prepend

Label

Toggle dark mode

<certara-input placeholder="Enter value">
  <span slot="prepend">Label</span>
</certara-input>

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

<CertaraInput placeholder="Enter value">
  <span slot="prepend">Label</span>
</CertaraInput>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Enter value">
  <span slot="prepend">Label</span>
</certara-input>

Both

Label Button

Toggle dark mode

<certara-input placeholder="Enter value">
  <span slot="prepend">Label</span>
  <certara-button slot="append">Button</certara-button>
</certara-input>

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

<CertaraInput placeholder="Enter value">
  <span slot="prepend">Label</span>
  <CertaraButton slot="append">Button</CertaraButton>
</CertaraInput>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Enter value">
  <span slot="prepend">Label</span>
  <certara-button slot="append">Button</certara-button>
</certara-input>

With icon

Search

Toggle dark mode

<certara-input placeholder="Search...">
  <span slot="prepend">
    <certara-icon name="magnifying-glass" role="presentation" />
    <span class="visually-hidden">Search</span>
  </span>
</certara-input>

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

<CertaraInput placeholder="Search...">
  <span slot="prepend">
    <CertaraIcon name="magnifying-glass" role="presentation" />
    <span className="visually-hidden">Search</span>
  </span>
</CertaraInput>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Search...">
  <span slot="prepend">
    <certara-icon name="magnifying-glass" role="presentation"></certara-icon>
    <span class="visually-hidden">Search</span>
  </span>
</certara-input>

certara-input

Properties

accept

Attribute	accept
Type	string
Default	undefined
Required	false
Description	Accepted file types for file inputs (e.g., “.pdf,.doc”).

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Prevents user interaction.

max

Attribute	max
Type	number | string
Default	undefined
Required	false
Description	Maximum value for number/date inputs.

maxlength

Attribute	maxlength
Type	number
Default	undefined
Required	false
Description	Maximum number of characters allowed.

min

Attribute	min
Type	number | string
Default	undefined
Required	false
Description	Minimum value for number/date inputs.

minlength

Attribute	minlength
Type	number
Default	undefined
Required	false
Description	Minimum number of characters required.

name

Attribute	name
Type	string
Default	this.inputId
Required	false
Description	Form control name, used for form submission and validation events.

pattern

Attribute	pattern
Type	string
Default	undefined
Required	false
Description	Regex pattern the value must match.

placeholder

Attribute	placeholder
Type	string
Default	undefined
Required	false
Description	Placeholder text shown when empty.

readonly

Attribute	readonly
Type	boolean
Default	false
Required	false
Description	Prevents editing while allowing selection and copy.

required

Attribute	required
Type	boolean
Default	false
Required	false
Description	Marks the field as required for form validation.

size

Attribute	size
Type	"md" | "sm"
Default	'md'
Required	false
Description	Visual size variant of the input.

step

Attribute	step
Type	number | string
Default	undefined
Required	false
Description	Step increment for number inputs.

type

Attribute	type
Type	"date" | "datetime-local" | "email" | "file" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url"
Default	'text'
Required	false
Description	Input type, affects keyboard on mobile and validation.

value

Attribute	value
Type	string
Default	undefined
Required	false
Description	Current value of the input.

Events

Name	Description	Bubbles
certaraBlur	Emitted when the input loses focus.	true
certaraChange	Emitted when value changes from the previous value.	true
certaraFocus	Emitted when the input gains focus.	true
certaraFormControlError	Emitted when validation state changes. Payload is the error message or empty string when valid.	true
certaraInput	Emitted on every keystroke.	true

Methods

Name	Signature	Description
setBlur	() => Promise<void>	Programmatically blurs the input.
setError	(error: string) => Promise<void>	Sets a custom error message. This allows consumers to call input.setError('my error message') instead of input.setAttribute('error', 'my error message').
setFocus	() => Promise<void>	Programmatically focuses the input.

Slots

Name	Description
append	Content placed after the input (e.g., buttons, icons).
prepend	Content placed before the input (e.g., labels, icons).