sufi-blazor/docs/components/forms/SbTextArea.md

SbTextArea

A multi-line text input component with support for labels, character counting, and resizable behavior.

Parameters

Parameter	Type	Default	Description
Value	string?	null	The current text value (two-way bindable)
ValueChanged	EventCallback<string?>	-	Callback when value changes
Placeholder	string?	null	Placeholder text
Rows	int	3	Number of visible text rows
MaxLength	int?	null	Maximum character length
ShowCharacterCount	bool	false	Whether to show character count
Resizable	bool	true	Whether the textarea is resizable
Disabled	bool	false	Whether the textarea is disabled
ReadOnly	bool	false	Whether the textarea is read-only
Error	bool	false	Whether the textarea has an error
Id	string?	null	Element ID
Label	string?	null	Label text displayed above the textarea
Required	bool	false	Whether the field is required
HelperText	string?	null	Helper or hint text below the textarea (hidden when Error is true)
ErrorMessage	string?	null	Error message shown when Error is true
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes for the textarea

Events

Event	Type	Description
ValueChanged	EventCallback<string?>	Fired when the value changes

CSS Classes

• sb-textarea - Base class
• sb-textarea__label - Label element
• sb-textarea__required - Required asterisk
• sb-textarea__input - The textarea element
• sb-textarea__helper - Helper text container
• sb-textarea__error - Error message container
• sb-textarea__counter - Character count display
• sb-textarea__resize-handle - Visual resize indicator
• sb-textarea--error - Error state
• sb-textarea--disabled - Disabled state
• sb-textarea--readonly - Read-only state

Accessibility

• Uses native <textarea> element
• aria-invalid set when Error is true
• aria-describedby links to helper text or error message ID for screen readers
• Label properly associated via for attribute

Examples

Basic Usage

<SbTextArea @bind-Value="description" 
            Label="Description" 
            Placeholder="Enter a description..." />

With Character Limit

<SbTextArea @bind-Value="bio" 
            Label="Bio"
            MaxLength="500"
            ShowCharacterCount="true"
            Placeholder="Tell us about yourself..." />

Larger Text Area

<SbTextArea @bind-Value="content" 
            Label="Article Content"
            Rows="10"
            Resizable="true" />

Non-Resizable

<SbTextArea @bind-Value="note" 
            Label="Quick Note"
            Rows="3"
            Resizable="false" />

With Helper Text

<SbTextArea @bind-Value="comments" 
            Label="Comments"
            HelperText="Maximum 500 characters"
            Placeholder="Enter comments..." />

With Error State

<SbTextArea @bind-Value="comments" 
            Label="Feedback"
            Error="true"
            ErrorMessage="This field contains invalid content"
            Placeholder="Enter feedback..." />

Disabled and Read-Only

<SbTextArea Value="This content is locked" 
            Label="Locked Content"
            Disabled="true" />

<SbTextArea @bind-Value="viewOnlyText" 
            Label="View Only"
            ReadOnly="true" />

Required Field

<SbTextArea @bind-Value="feedback" 
            Label="Feedback"
            Required="true"
            Placeholder="Your feedback is required..." />