Text area

Design guidelines

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Code

HTML

React

Angular

// 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" required="true"></certara-textarea>

// 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" disabled="true"></certara-textarea>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-textarea value="Readonly" readonly="true"></certara-textarea>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-textarea value="5 rows" rows="5"></certara-textarea>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-textarea value="20 character limit" maxlength="20"></certara-textarea>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

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

Design guidelines

Stacked layout

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.

Help or instructional text goes here

Horizontal layout

Side labels are most useful when vertical space is limited.

Help or instructional text goes here

Design resources

View component in Figma