P11 Blazor UI Library – Bootstrap 5.3 Components

P11Textarea Component

The P11Textarea component provides a multi-line text input field, wrapping the native HTML <textarea> element. It integrates with Bootstrap's form styling and offers essential features like labels, descriptions, placeholders, character limits, and seamless integration with Blazor's validation system.

Note: This component handles standard textarea attributes like Rows, Placeholder, and MaxLength. It's recommended to use the ValidationFor parameter for proper client-side and server-side validation integration within Blazor forms.

P11Textarea Component Examples

These examples demonstrate various configurations and functionalities of the P11Textarea component, showcasing its flexibility for different use cases and event handling.

Here you can test the various configurations of the P11Textarea component.

1. Basic Textarea

Simple text area with default settings (label, description, 3 rows, no validation).

Your Message

Enter your message here.

Value:

2. Textarea with Explicit Change Logging

This example explicitly logs value changes using the OnChange event. The log below will update when you finish typing and leave the textarea.

Log Changes

Value:

3. Textarea with Focus and Blur Events

This example demonstrates logging when the textarea gains or loses focus.

Focus/Blur Events

Value:

4. Textarea with Placeholder and MaxLength

Text area with placeholder and maximum character length.

Short Remark

Value:

5. Disabled Textarea

A disabled text area.

Disabled Field

This field is not editable.

Value: Disabled text here

6. Textarea with Custom Rows

Text area with a custom number of rows (e.g., 6 rows).

Long Description

This field is larger.

Value:

7. Textarea with Validation (Required)

Text area marked as a required field. Try leaving it empty and submitting the form.

Required Field

Value:

8. Textarea with Validation (MinLength and MaxLength)

Text area with minimum and maximum length validation.

Comment (min. 10, max. 100 characters)

Value:

9. Textarea with Nullable String Value

Text area that accepts a null value (string?). Expected: Initially empty, toggling works.

Optional Note

Can be left empty.

Value: ?? "null"

10. Textarea with Additional Attributes

Text area with a custom data-info attribute. Check it in the browser inspector.

Field with Extra Attribute

Value:

Event Log

This log displays events triggered by the textarea components, such as focus, blur, and explicit value changes.

Implementation

<h3 class="mt-5">P11Textarea Component Examples</h3>
<p>These examples demonstrate various configurations and functionalities of the P11Textarea component, showcasing its flexibility for different use cases and event handling.</p>

<EditForm Model="@_textAreaModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit" @ref="editFormRef">
    <DataAnnotationsValidator />

    <p>Here you can test the various configurations of the <code>P11Textarea</code> component.</p>

    @* 1. Basic Textarea *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">1. Basic Textarea</h4>
        <p>Simple text area with default settings (label, description, 3 rows, no validation).</p>
        <P11Textarea TValue="string"
                     Label="Your Message"
                     Description="Enter your message here."
                     ShowDevelopmentErrors="false"
                     @bind-Value="_textAreaModel.BasicText" />
        <p>Value: @_textAreaModel.BasicText</p>
    </div>

    @* 2. Textarea with Explicit Change Logging *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">2. Textarea with Explicit Change Logging</h4>
        <p>This example explicitly logs value changes using the <code>OnChange</code> event. The log below will update when you finish typing and leave the textarea.</p>
        <P11Textarea TValue="string"
                     Label="Log Changes"
                     Placeholder="Type something and then click outside the textarea."
                     ShowDevelopmentErrors="false"
                     @bind-Value="_textAreaModel.LoggedText"
                     OnChange="@((ChangeEventArgs e) => LogEventTextarea($"Value changed to: '{e.Value}'"))" />
        <p>Value: @_textAreaModel.LoggedText</p>
    </div>

    @* 3. Textarea with Focus and Blur Events *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">3. Textarea with Focus and Blur Events</h4>
        <p>This example demonstrates logging when the textarea gains or loses focus.</p>
        <P11Textarea TValue="string"
                     Label="Focus/Blur Events"
                     Placeholder="Click here and then click away."
                     ShowDevelopmentErrors="false"
                     @bind-Value="_textAreaModel.FocusBlurText"
                     OnFocus="@((FocusEventArgs e) => LogEventTextarea("Textarea got focus!"))"
                     OnBlur="@((FocusEventArgs e) => LogEventTextarea("Textarea lost focus!"))" />
        <p>Value: @_textAreaModel.FocusBlurText</p>
    </div>

    @* 4. Textarea with Placeholder and MaxLength *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">4. Textarea with Placeholder and MaxLength</h4>
        <p>Text area with placeholder and maximum character length.</p>
        <P11Textarea TValue="string"
                     Label="Short Remark"
                     Placeholder="Max. 50 characters"
                     MaxLength="50"
                     ShowDevelopmentErrors="false"
                     @bind-Value="_textAreaModel.ShortText" />
        <p>Value: @_textAreaModel.ShortText</p>
    </div>

    @* 5. Disabled Textarea *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">5. Disabled Textarea</h4>
        <p>A disabled text area.</p>
        <P11Textarea TValue="string"
                     Label="Disabled Field"
                     Description="This field is not editable."
                     @bind-Value="_textAreaModel.DisabledText"
                     Disabled="true"
                     ShowDevelopmentErrors="false" />
        <p>Value: @_textAreaModel.DisabledText</p>
    </div>

    @* 6. Textarea with Custom Rows *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">6. Textarea with Custom Rows</h4>
        <p>Text area with a custom number of rows (e.g., 6 rows).</p>
        <P11Textarea TValue="string"
                     Label="Long Description"
                     Description="This field is larger."
                     Rows="6"
                     ShowDevelopmentErrors="false"
                     @bind-Value="_textAreaModel.LongDescription" />
        <p>Value: @_textAreaModel.LongDescription</p>
    </div>

    @* 7. Textarea with Validation (Required) *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">7. Textarea with Validation (Required)</h4>
        <p>Text area marked as a required field. Try leaving it empty and submitting the form.</p>
        <P11Textarea TValue="string"
                     Label="Required Field"
                     @bind-Value="_textAreaModel.RequiredText"
                     ValidationFor="@(() => _textAreaModel.RequiredText)" />
        <p>Value: @_textAreaModel.RequiredText</p>
    </div>

    @* 8. Textarea with Validation (MinLength and MaxLength) *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">8. Textarea with Validation (MinLength and MaxLength)</h4>
        <p>Text area with minimum and maximum length validation.</p>
        <P11Textarea TValue="string"
                     Label="Comment (min. 10, max. 100 characters)"
                     @bind-Value="_textAreaModel.Comment"
                     ValidationFor="@(() => _textAreaModel.Comment)"
                     MaxLength="100" />
        <p>Value: @_textAreaModel.Comment</p>
    </div>

    @* 9. Textarea with Nullable String Value *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">9. Textarea with Nullable String Value</h4>
        <p>Text area that accepts a null value (<code>string?</code>). Expected: Initially empty, toggling works.</p>
        <P11Textarea TValue="string"
                     Label="Optional Note"
                     Description="Can be left empty."
                     ShowDevelopmentErrors="false"
                     @bind-Value="_textAreaModel.OptionalNote" />
        <p>Value: @_textAreaModel.OptionalNote ?? "null"</p>
    </div>

    @* 10. Textarea with Additional Attributes *@
    <div class="card p-3 mb-4">
        <h4 class="card-title">10. Textarea with Additional Attributes</h4>
        <p>Text area with a custom <code>data-info</code> attribute. Check it in the browser inspector.</p>
        <P11Textarea TValue="string"
                     Label="Field with Extra Attribute"
                     @bind-Value="_textAreaModel.DataText"
                     ShowDevelopmentErrors="false"
                     @attributes='new Dictionary<string, object> { { "data-info", "some-custom-data" }, { "style", "background-color: #f0f8ff;" } }' />
        <p>Value: @_textAreaModel.DataText</p>
    </div>

    <button type="submit" class="btn btn-primary me-2">Submit Form</button>
    <button type="button" class="btn btn-secondary" @onclick="ResetForm">Reset Form</button>

    @if (_formSubmitted)
    {
        <div class="mt-3 alert @(_isFormValid ? "alert-success" : "alert-danger")">
            @if (_isFormValid)
            {
                <p>Form submitted successfully!</p>
            }
            else
            {
                <p>Please correct the validation errors.</p>
            }
        </div>
    }

</EditForm>

<br />
<hr class="border border-2 opacity-25">

@* Event Log *@
<div class="bg-light p-4 rounded mb-4">
    <h4 class="mb-3">Event Log</h4>
    <p>This log displays events triggered by the textarea components, such as focus, blur, and explicit value changes.</p>
    <div class="border p-2" style="height: 150px; overflow-y: scroll; background-color: #f8f9fa;">
        @foreach (var logEntry in eventLogTextarea)
        {
            <div>@logEntry</div>
        }
    </div>
</div>

@code {
    private TextareaTestModel _textAreaModel = new TextareaTestModel();
    private bool _formSubmitted;
    private bool _isFormValid;

    private EditForm? editFormRef;

    private List<string> eventLogTextarea = new List<string>();

    // Model für die Validierung
    public class TextareaTestModel
    {
        public string? BasicText { get; set; }

        public string? LoggedText { get; set; } // For OnChange logging example

        public string? FocusBlurText { get; set; } // For OnFocus/OnBlur example

        public string? ShortText { get; set; }

        public string? DisabledText { get; set; } = "Disabled text here";

        public string? LongDescription { get; set; }

        [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "This field is required.")]
        public string? RequiredText { get; set; }

        [System.ComponentModel.DataAnnotations.MinLength(10, ErrorMessage = "Minimum 10 characters required.")]
        [System.ComponentModel.DataAnnotations.MaxLength(100, ErrorMessage = "Maximum 100 characters allowed.")]
        public string? Comment { get; set; }

        public string? OptionalNote { get; set; }

        public string? DataText { get; set; }
    }

    private void HandleValidSubmit()
    {
        _isFormValid = true;
        _formSubmitted = true;
        LogEventTextarea("Form submitted successfully!");
        Console.WriteLine("Formular erfolgreich abgesendet!");
    }

    private void HandleInvalidSubmit()
    {
        _isFormValid = false;
        _formSubmitted = true;
        LogEventTextarea("Form contains validation errors.");
        Console.WriteLine("Formular enthält Validierungsfehler.");
    }

    private void ResetForm()
    {
        _textAreaModel = new TextareaTestModel(); // Erstellt ein neues, leeres Model
        _formSubmitted = false;
        _isFormValid = false;

        if (editFormRef != null && editFormRef.EditContext != null)
        {
            editFormRef.EditContext.NotifyValidationStateChanged();
        }
        eventLogTextarea.Clear(); // Clear the event log on reset
        StateHasChanged(); // Forciert das Rendern der UI
    }

    private void LogEventTextarea(string message)
    {
        eventLogTextarea.Add($"{DateTime.Now:HH:mm:ss} - {message}");
        if (eventLogTextarea.Count > 10)
        {
            eventLogTextarea.RemoveAt(0);
        }
        StateHasChanged();
    }
}

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text for the textarea.
`Description`	`string?`	`null`	Gets or sets a descriptive text that will appear below the textarea, typically providing additional guidance or context.
`Value`	`TValue?`	`null`	The value of the textarea. This parameter is used for two-way binding with `@bind-Value`. Expected types are string or string?.
`ValidationFor`	`Expression<Func<TValue>>?`	`null`	Gets or sets an expression that identifies the field for validation messages. Example: `() => MyModel.MyProperty`
`CssClass`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the root div element of the component.
`Disabled`	`bool`	`false`	Gets or sets a value indicating whether the textarea should be displayed in a disabled state.
`Rows`	`int`	`3`	Gets or sets the number of visible text lines in the textarea.
`Placeholder`	`string?`	`null`	Gets or sets the placeholder text for the textarea.
`MaxLength`	`int?`	`null`	Gets or sets the maximum number of characters allowed in the textarea.
`ShowDevelopmentErrors`	`bool`	`true`	If `true`, configuration error messages will be displayed on the UI in development mode. Set to `false` to suppress them globally or per instance.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Gets or sets a collection of additional attributes that will be applied to the textarea element. This allows passing standard HTML attributes directly to the underlying textarea tag. Example: `@attributes="AdditionalAttributes"`
Events
`ValueChanged`	`EventCallback<TValue>`	-	An `EventCallback` that is invoked when the `Value` changes. Used for two-way binding.
`OnChange`	`EventCallback<ChangeEventArgs>`	-	An `EventCallback` that is invoked when the textarea's value is committed (e.g., on blur or Enter key).
`OnFocus`	`EventCallback<FocusEventArgs>`	-	An `EventCallback` that is invoked when the textarea gains focus.
`OnBlur`	`EventCallback<FocusEventArgs>`	-	An `EventCallback` that is invoked when the textarea loses focus.