Text area

Show 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

Framework

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></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></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></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