Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

TextField

A labeled text input with add-ons and a password reveal.

JavaScript off: what the HTML and CSS do on their own.

Usage

razor
@* Label, type and limits from the model's attributes. *@
<TextField @bind-Value="Model.Email" />

@* Your own label and a hint. *@
<TextField @bind-Value="Model.Dept" Label="Department" Hint="On your profile." />

@* Text attached to the field. *@
<TextField @bind-Value="Model.Website">
    <StartAddon>https://</StartAddon>
</TextField>

Labels and hints

Use Label to replace the label from the model (its [Display(Name)], or the property name in words), and Hint for help under the field. [Required] marks it.

Preview

We'll send the invitation here.

Code

Labels.razor 
@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="labels" MaxWidth="24.Rem" Grow>
    <TextField @bind-Value="Model!.FullName" AutoComplete="name" />
    <TextField @bind-Value="Model!.Email" Hint="We'll send the invitation here." />
    <TextField @bind-Value="Model!.Dept" Label="Department" Placeholder="Design" />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "labels")]
    private Invite? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Invite
    {
        [Required]
        public string? FullName { get; set; }

        [Required, EmailAddress, Display(Name = "Work email")]
        public string? Email { get; set; }

        public string? Dept { get; set; }
    }
}

Types

Use Type for email, phone, URL, search or password. It defaults from [EmailAddress], [Phone], [Url] and [DataType(DataType.Password)], and sets the on-screen keyboard and, for email and URL, the browser's check.

razor
@* [Phone] on the property: type="tel". *@
<TextField @bind-Value="Model.Phone" />

<TextField @bind-Value="Model.Query" Type="TextFieldType.Search" />

Passwords

Use Reveal="false" to leave out the show/hide button a password field gets once IzzyBlazor's script runs.

Preview

At least 12 characters.

Code

Password.razor 
@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="password" MaxWidth="24.Rem" Grow>
    <TextField @bind-Value="Model!.Password" AutoComplete="new-password" Hint="At least 12 characters." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "password")]
    private Account? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Account
    {
        [Required, MinLength(12), DataType(DataType.Password)]
        public string? Password { get; set; }
    }
}

Off: A plain password input, with no show/hide button.

Icons

Use StartIcon or EndIcon for an icon inside the field.

Preview

Code

Icons.razor 
<Form Model="Model" FormName="icons" MaxWidth="24.Rem" Grow>
    <TextField @bind-Value="Model!.Query" Type="TextFieldType.Search" StartIcon="Lucide.Search" Label="Search" HideLabel Placeholder="Search projects" />
    <TextField @bind-Value="Model!.Handle" StartIcon="Lucide.AtSign" Label="Username" />
    <TextField @bind-Value="Model!.Domain" EndIcon="Lucide.Globe" Label="Domain" />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "icons")]
    private Profile? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Profile
    {
        public string? Query { get; set; }
        public string? Handle { get; set; } = "izzy";
        public string? Domain { get; set; } = "example.com";
    }
}

Add-ons

Use StartAddon and EndAddon to attach text, a Select or a button to the field. A submit button there posts the form, so a search box works with JavaScript off.

Preview

https://

Code

Addons.razor 
<Form Model="Model" FormName="addons" MaxWidth="26.Rem" Grow>
    <TextField @bind-Value="Model!.Website">
        <StartAddon>https://</StartAddon>
    </TextField>
    <TextField @bind-Value="Model!.Price" Label="Price">
        <EndAddon><Select @bind-Value="Model!.Currency" /></EndAddon>
    </TextField>
    <TextField @bind-Value="Model!.Query" Type="TextFieldType.Search" Label="Search" HideLabel Placeholder="Search orders">
        <EndAddon><Button Submit>Search</Button></EndAddon>
    </TextField>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "addons")]
    private Listing? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public enum Currency { USD, EUR, GBP }

    public sealed class Listing
    {
        public string? Website { get; set; } = "example.com";
        public string? Price { get; set; } = "24.00";
        public Currency Currency { get; set; }
        public string? Query { get; set; }
    }
}

Validation

Use the model's attributes for the rules. The browser checks required, length, range, email and URL before posting, with your ErrorMessage; the server checks every rule and shows its messages under the field.

Preview

Code

Validation.razor 
@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="signup" OnValidSubmit="Save" MaxWidth="24.Rem" Grow>
    <TextField @bind-Value="Model!.Username" AutoComplete="username" />
    <TextField @bind-Value="Model!.Email" AutoComplete="email" />
    <Row><Button Submit>Create account</Button></Row>
    @if (_saved)
    {
        <Alert Status="Status.Success">Welcome, @Model!.Username.</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "signup")]
    private Signup? Model { get; set; }

    private bool _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = true;

    public sealed class Signup
    {
        [Required(ErrorMessage = "Choose a username")]
        [StringLength(20, MinimumLength = 3, ErrorMessage = "Use 3 to 20 characters")]
        public string? Username { get; set; }

        [Required(ErrorMessage = "Enter your email"), EmailAddress(ErrorMessage = "Enter an email like name@example.com")]
        public string? Email { get; set; }
    }
}

Off: The browser checks before posting, in its own words; the server's messages show after.

Sizes, read-only and disabled

Use Size to line up with buttons and other fields, ReadOnly for a value that posts but can't change, and Disabled for one that doesn't post.

Preview

Read-only: posted, but can't be changed.

Disabled: not posted.

Code

States.razor 
<Form Model="Model" FormName="states" MaxWidth="24.Rem" Grow>
    <TextField @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <TextField @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <TextField @bind-Value="Model!.Id" Label="Account ID" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <TextField @bind-Value="Model!.Plan" Label="Plan" Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "states")]
    private Settings? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Settings
    {
        public string? Small { get; set; }
        public string? Large { get; set; }
        public string? Id { get; set; } = "acct_48213";
        public string? Plan { get; set; } = "Team";
    }
}

Mode support

What works in each mode, TextField
FeatureOffStaticLive
Label, hint, type and limits from the modelYesYesYes
Icons and add-onsYesYesYes
Checks before posting, server messages under the fieldYesYesYes
Show/hide button on passwordsNoYesYes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

  • It renders a native input with a label linked to it, so clicking the label focuses the field.
  • The hint and, when the field is invalid, its errors are linked with aria-describedby; an invalid field sets aria-invalid.
  • A field with no visible label, such as a search box in a toolbar, needs HideLabel, not an empty label: screen readers still hear the label.
  • A placeholder isn't a label: it's gone once there's text, and screen readers may not read it.
  • Add-on text isn't part of the field's name, so put a unit that matters in the label too, as in "Price (USD)".
  • The show/hide button is a toggle named "Show password" (ShowPasswordLabel), pressed while the password shows.

Parameters

TextField parameters
PropTypeDefault
ReadOnlyMakes the field read-only: it can be focused and its text selected, and it still posts.boolfalse
TypeThe kind of text.TextFieldType?
PlaceholderExample text shown when empty.string?
AutoCompleteThe browser autofill hint, such as email, name, new-password.string?
MaxLengthMaximum length.int?computed
MinLengthMinimum length.int?computed
StartIconAn icon inside the field, before the text.IconData?
EndIconAn icon inside the field, after the text.IconData?
StartAddonContent attached before the control, outside its border: short text (https://, $), a button, or another field such as a Select<T> (its label is kept for screen readers but not shown).RenderFragment?
EndAddonContent attached after the control, outside its border.RenderFragment?
RevealFor passwords: a button that shows or hides the text.booltrue
ShowPasswordLabelThe reveal button's name; it's a toggle, pressed while the password shows.string?"Show password"
@bind-ValueThe value, bound with @bind-Value.string?
DisplayNameThe field's name in validation messages from the input itself, such as a value that can't be parsed.string?

Plus 26 field props.

Full API

See also