Textarea
Displays a text area that allows users to enter multiple lines of text input
<dui-field>
<dui-field-label>Describe your experience</dui-field-label>
<dui-textarea
placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>
<dui-field-description>
Your feedback helps other travelers make better choices. Be as descriptive as possible!
</dui-field-description>
</dui-field>Usage
<dui-textarea />Examples
Model binding
The dui-textarea Tag Helper has full support for ASP.NET Core model binding using the asp-for attribute. When using model binding, DuneUI 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
<dui-textarea asp-for="Review"/>public class ReviewModel
{
[Display(
Name = "Describe your experience",
Description = "Your feedback helps other travelers make better choices. Be as descriptive as possible!",
Prompt = "The view from the balcony was breathtaking, but the breakfast service was a bit slow..."
)]
public string? Review { get; set; }
}Model binding validation
When using model binding, validation errors from Model state are displayed correctly.
<dui-textarea asp-for="Review"/>public class ReviewValidationModel
{
[Display(
Name = "Describe your experience",
Description = "Your feedback helps other travelers make better choices. Be as descriptive as possible!",
Prompt = "The view from the balcony was breathtaking, but the breakfast service was a bit slow..."
)]
[Required(ErrorMessage = "Please leave a review for other travelers")]
public string? Review { get; set; }
}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.
<dui-field>
<dui-field-label>Describe your experience</dui-field-label>
<dui-textarea
placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>
<dui-field-description>
Your feedback helps other travelers make better choices. Be as descriptive as possible!
</dui-field-description>
</dui-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.
<dui-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 dui-field-error Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).
<dui-field>
<dui-field-label>Describe your experience</dui-field-label>
<dui-textarea
aria-invalid="true"
placeholder="The view from the balcony was breathtaking, but the breakfast service was a bit slow..."/>
<dui-field-error>
Please leave a review for other travelers
</dui-field-error>
<dui-field-description>
Your feedback helps other travelers make better choices. Be as descriptive as possible!
</dui-field-description>
</dui-field><dui-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..."
aria-invalid="true"
error="Please leave a review for other travelers"
/>