Text field

Show design guidelines

Code

Framework

HTML

React

Angular

Default

Toggle dark mode

<certara-input placeholder="Placeholder" />

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

<CertaraInput placeholder="Placeholder" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Placeholder"></certara-input>

With value

Toggle dark mode

<certara-input value="Input value" />

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

<CertaraInput value="Input value" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input value="Input value"></certara-input>

Disabled

Toggle dark mode

<certara-input placeholder="Placeholder" disabled />

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

<CertaraInput placeholder="Placeholder" disabled />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Placeholder" disabled></certara-input>

Read only

Toggle dark mode

<certara-input value="Read only value" readonly />

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

<CertaraInput value="Read only value" readOnly />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input value="Read only value" readonly></certara-input>

With label and help text

Framework

HTML

React

Angular

Stacked layout

Help or instructional text goes here

Toggle dark mode

<certara-form-group label="Label" layout="stacked">
  <span slot="help">Help or instructional text goes here</span>
  <certara-input placeholder="Placeholder"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Label" layout="stacked">
  <span slot="help">Help or instructional text goes here</span>
  <CertaraInput placeholder="Placeholder" />
</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" layout="stacked">
  <span slot="help">Help or instructional text goes here</span>
  <certara-input placeholder="Placeholder"></certara-input>
</certara-form-group>

Horizontal layout

Help or instructional text goes here

Toggle dark mode

<certara-form-group label="Label" layout="horizontal">
  <span slot="help">Help or instructional text goes here</span>
  <certara-input placeholder="Placeholder"></certara-input>
</certara-form-group>

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

<CertaraFormGroup label="Label" layout="horizontal">
  <span slot="help">Help or instructional text goes here</span>
  <CertaraInput placeholder="Placeholder" />
</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" layout="horizontal">
  <span slot="help">Help or instructional text goes here</span>
  <certara-input placeholder="Placeholder"></certara-input>
</certara-form-group>

Input types

Framework

HTML

React

Angular

Text

Toggle dark mode

<certara-input type="text" placeholder="Text input" />

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

<CertaraInput type="text" placeholder="Text input" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="text" placeholder="Text input"></certara-input>

Password

Toggle dark mode

<certara-input type="password" placeholder="Password" />

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

<CertaraInput type="password" placeholder="Password" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="password" placeholder="Password"></certara-input>

Email

Toggle dark mode

<certara-input type="email" placeholder="email@example.com" />

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

<CertaraInput type="email" placeholder="email@example.com" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="email" placeholder="email@example.com"></certara-input>

Number

Note: There is a more robust, numeric stepper component with finer-grain support for numerical types

Toggle dark mode

<certara-input type="number" placeholder="0" />

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

<CertaraInput type="number" placeholder={0} />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="number" placeholder="0"></certara-input>

Search

Toggle dark mode

<certara-input type="search" placeholder="Search..." />

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

<CertaraInput type="search" placeholder="Search..." />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input type="search" placeholder="Search..."></certara-input>

Sizes

Framework

HTML

React

Angular

Medium

Toggle dark mode

<certara-input placeholder="Medium (default)" />

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

<CertaraInput placeholder="Medium (default)" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input placeholder="Medium (default)"></certara-input>

Small

Toggle dark mode

<certara-input size="sm" placeholder="Small" />

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

<CertaraInput size="sm" placeholder="Small" />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input size="sm" placeholder="Small"></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).