Text Area
Text Area is a multi-line text input component used to capture long-form user input.
Last updated
Text Area is a multi-line text input component used to capture long-form user input.
Last updated
Text area fields are used in forms and input scenarios where users need to provide larger amounts of text, such as comments, descriptions, or messages. They are ideal for situations requiring more space than a standard text field, enabling users to input detailed information.
A text area field component typically includes a label, a multi-line input area, and optional elements like helper or placeholder text for user guidance. It can display different states, such as focused, filled, or error, indicating its current status. Text area fields are essential interactive elements in forms and interfaces where extensive user input is needed.
aria_label
An optional string that provides an accessible label for the input field, improving accessibility for screen readers. It helps users with visual impairments understand the purpose of the input field.
string
component_mode
An optional string that can be used to apply a specific mode or variation of the component, such as a 'light' or 'dark' state, for customization.
string
custom_class
A string that allows you to pass custom CSS classes to further customize the styling of the input container.
string
enable_rich_editor
A boolean value that determines whether to enable a rich text editor (using the Quill library). If true, the Quill editor is rendered; if false, a standard textarea is displayed.
boolean
error_message
A string containing an error message to be displayed when the input validation fails. This will appear below the input field when an error occurs.
string
helper_text
A string providing additional guidance or information about the input field. It can be displayed below the input to assist the user.
string
input_id
A unique string identifier for the input field. This is used to link the label with the input and for accessibility purposes.
string
input_status
A string that allows customization of the input’s visual appearance depending on its status (e.g., active, disabled, etc.). This is used for styling purposes.
string
label
A string that sets the label text for the textarea or rich text editor. This is displayed above the input field to provide context or instructions.
string
max_characters
A number specifying the maximum allowed characters in the input field. This is used to restrict the user’s input and is displayed in the helper or error message.
number
placeholder
A string that sets the placeholder text inside the textarea or rich text editor when it is empty.
string
validation_type
An optional string that defines the type of validation applied to the input. It could affect the styling or behavior based on different validation scenarios.
string
value
The initial value of the textarea or rich text editor. It will bind to the content inside the input and can be used to set its initial state.
string
Label: A title or descriptor for the input field, guiding users on what information to enter.
Lead-Icon: An optional icon that provides additional context or represents the type of input required.
Placeholder: Sample text displayed within the input field that hints at the expected input format or content.
Caption: Helper or footer text that offers further instructions or clarifications for the input.
Trail-Text: A counter or indicator often used to show the number of characters entered or remaining, providing feedback on input limits.
Use text area fields for inputs that require multiple lines of text.
Don't use text area fields for short or single-line inputs; use standard text fields for those.
Provide a clear and concise label that describes the expected input.
Avoid using ambiguous or unclear labels for text area fields.
Include placeholder text to give users an example of the expected input format.
Don't rely solely on placeholder text for essential instructions.
Ensure text area fields are large enough to be easily tappable or clickable.
Avoid making text area fields too small to interact with comfortably.
Use helper text to provide additional context or instructions.
Don't overload the text area field with too much information.
Validate input and provide clear error messages when necessary.
Don't provide generic error messages that don't help users understand the issue.
Keep consistent styling and spacing across all text area fields in the application.
Don't use inconsistent styles that may confuse users.
