Textarea

<sa-field>
    <sa-field-label>Describe your experience</sa-field-label>
    <sa-textarea
        placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>
    <sa-field-description>
        Your feedback helps other travelers make better choices. Be as descriptive as possible!
    </sa-field-description>
</sa-field>

Usage

Renders a styled <textarea>. Use rows and the other native attributes as usual.

<sa-textarea />

Examples

Model binding

Supports ASP.NET Core model binding via asp-for. When using model binding, StellarAdmin will automatically wrap the textarea inside a Field with the correct label, description, and placeholder text derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.

<sa-textarea asp-for="Review"/>

Model binding validation

When using model binding, validation errors from Model state are displayed correctly.

<sa-textarea asp-for="Review"/>

With field

If you are not using model binding, you can use the various Field Tag Helpers to wrap your text area inside a field.

<sa-field>
    <sa-field-label>Describe your experience</sa-field-label>
    <sa-textarea
        placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>
    <sa-field-description>
        Your feedback helps other travelers make better choices. Be as descriptive as possible!
    </sa-field-description>
</sa-field>

Implicit field

You can also implicitly wrap the text area inside a Field using the shorthand syntax and setting the label and description attributes.

<sa-textarea
    label="Describe your experience"
    description="Your feedback helps other travelers make better choices. Be as descriptive as possible!"
    placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>

Manual validation

If you're not using ASP.NET Core model binding, you can manually indicate validation errors by setting the aria-invalid attribute to true. This will display a red border around the text area.

The error message can be displayed using either a <sa-field-error> Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).

<sa-field>
    <sa-field-label>Describe your experience</sa-field-label>
    <sa-textarea
        aria-invalid="true"
        placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>
    <sa-field-error>
        Please leave a review for other travelers
    </sa-field-error>
    <sa-field-description>
        Your feedback helps other travelers make better choices. Be as descriptive as possible!
    </sa-field-description>
</sa-field>

Part classes

Pass a TextareaClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-textarea> using class-names. Each property accepts an optional string of space-separated CSS classes, which are added to the part's existing classes.

@{
    var partClasses = new TextareaClassNames
    {
        Root = "travel-field",
        Label = "travel-label",
        Description = "travel-help",
        Control = "travel-textarea-control",
    };
}

<sa-textarea id="classes-requests" label="Special requests" description="Tell us how we can make your stay comfortable." class-names="@partClasses" />

Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with render-field="false", apply class directly to any field elements you compose yourself. The control-specific parts still apply. See Field part classes for the shared behavior and a styled example.

API Reference

<sa-textarea>

Renders a <textarea> element. The asp-for attribute provides the same model binding as the built-in Textarea Tag Helper.