TextArea

TextArea

The TextArea component is a customizable and resizable text input field that includes features like character limit tracking, optional labels, and different states (default, disabled, and error).

Props

• label: The label for the TextArea field. If provided, it displays above the textarea.

• placeholder:The placeholder text displayed inside the TextArea when it's empty.

• maxCharacters: (Default 200) Sets the maximum number of characters allowed in the textarea. A character counter is displayed at the bottom.

• onChange:Callback function triggered when the text input changes. Receives the current input value as an argument.

• required:if true, adds an asterisk to the label, indicating the field is required.

• info: Provides additional information about the field, displayed next to the label.

• className: Adds custom classes to the textarea wrapper for additional styling.

• state: ['default', 'disabled', 'error'] are the supported states

Usage example

        <TextArea
            label="Text Area"
            required
            placeholder="Placeholder text..."
            maxCharacters={200}
          />

          <TextArea
            label="Text Area"
            required
            state="error"
            placeholder="Placeholder text..."
            maxCharacters={200}
            onChange={(data) => { console.log(data) }}
          />

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	5
frontend-app-dashboard	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/ai-studio/AiStudio.jsx
• src/pages/create-program/index.jsx
• src/pages/program-single/settings/index.jsx
• src/pages/users/teams/CreateTeamDrawer.jsx
• src/pages/utilities/notifications/NotificationsDrawer.jsx

frontend-app-dashboard

• src/pages/support/InputDrawerSupport.jsx