Text area

Show design guidelines

Code

Framework HTML React Angular

Default

Toggle dark mode

<certara-textarea placeholder="Placeholder" rows="3"></certara-textarea>

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

<CertaraTextarea placeholder="Placeholder" rows={3} />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-textarea placeholder="Placeholder" rows="3"></certara-textarea>

Disabled

Toggle dark mode

<certara-textarea placeholder="Placeholder" rows="3" disabled></certara-textarea>

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

<CertaraTextarea placeholder="Placeholder" rows={3} disabled />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-textarea placeholder="Placeholder" rows="3" disabled></certara-textarea>

certara-textarea

Properties

cols

Attribute	cols
Type	number
Default	undefined
Required	false
Description	Visible width of the textarea in characters.

disabled

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

maxlength

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

name

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

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.

rows

Attribute	rows
Type	number
Default	undefined
Required	false
Description	Number of visible text rows.

size

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

value

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

Events

Name	Description	Bubbles
certaraBlur	Emitted when the textarea loses focus.	true
certaraChange	Emitted when value changes from the previous value.	true
certaraFocus	Emitted when the textarea 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 textarea.
setError	(error: string) => Promise<void>	Sets a custom error message. This allows consumers to call textarea.setError('my error message').
setFocus	() => Promise<void>	Programmatically focuses the textarea.

Slots

There are no slots available for this component