TextEdit and TextField

The TextEdit component provides basic text input functionality with support for prepend text or icons. It is intended as a low‑level input element for use within our form field components. The TextField component wraps TextEdit along with a label, help text, and validation messages, creating a complete form field experience. Both components are used within an EditForm to enable model binding and validation.

Special Note

RizzyUI form controls depend on the Rizzy library for form control support. RizzyUI form controls provide client-side data annotations validation. Click here for specific Rizzy form control documentation.

TextEdit Example

In the example below an EditForm is used with a single field that demonstrates the TextEdit component. A prepend text of @ is applied to indicate that the field expects an email address.

Source

<EditForm Model="Model" class="form-children-spacing">
    <RzValidationSummary />

    <Field>
        <FieldLabel DisplayName="Name" For="@(() => Model.Name)"></FieldLabel>
        <TextEdit For="@(() => Model.Name)"/>
        <RzValidationMessage For="@(() => Model.Name)" />
    </Field>
	
    <Field>
        <FieldLabel DisplayName="Email" For="@(() => Model.Email)"></FieldLabel>
        <TextEdit For="@(() => Model.Email)" PrependText="@("@")" />
        <RzValidationMessage For="@(() => Model.Email)" />
    </Field>

</EditForm>

TextField Example

The TextField component encapsulates a complete form field experience by combining a label, an input (via TextEdit), optional help content, and validation messages. The example below shows how to use it inside an EditForm.

Source

<EditForm Model="Model" class="form-children-spacing">
    <RzValidationSummary />

    <TextField For="@(() => Model.PhoneNumber)" DisplayName="Phone Number" Role="@TextRole.Tel"
               Placeholder="Enter your phone number.." PrependIcon="
">
        <FieldHelp>This is a helpful description</FieldHelp>
    </TextField>

    <Button type="submit" Variant="ButtonVariant.Primary" Size="Size.Medium">
        <span>Save</span>
    </Button>
</EditForm>

Customer Model Reference

The following code defines a sample Customer model that is used in these examples:

Source

<!-- Customer.cs -->
<summary>
Represents a customer with personal and contact information.
</summary>
public class Customer
{
    <summary>
    Gets or sets the unique identifier for the customer.
    </summary>
    public int CustomerId { get; set; } = 1234;

    <summary>
    Gets or sets the full name of the customer.
    </summary>
    [MaxLength(10)]
    public string Name { get; set; } = "Jane Johnson";

    <summary>
    Gets or sets the email address of the customer.
    </summary>
    public string Email { get; set; } = "johnsonj@gmail.com";

    <summary>
    Gets or sets the phone number of the customer.
    </summary>
    public string PhoneNumber { get; set; } = "555-555-5555";

    <summary>
    Gets or sets the age of the customer.
    </summary>
    public int Age { get; set; } = 29;

    <summary>
    Gets or sets a value indicating whether the customer is active.
    </summary>
    public bool IsActive { get; set; } = true;

    <summary>
    Gets or sets the gender of the customer.
    </summary>
    public string Gender { get; set; } = "female";

    <summary>
    Gets or sets the preferred method of contact for the customer.
    </summary>
    public string PreferredContactMethod { get; set; } = "email";

    <summary>
    Gets or sets the birth date of the customer.
    </summary>
    public DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-29).AddMonths(3).AddDays(9);

    <summary>
    Gets or sets the interests of the customer.
    This property is used to demonstrate the checkbox group components.
    </summary>
    public List<string> Interests { get; set; } = new List<string> { "Sports" };
}