Blazor Input Overview

The Ignite UI for Blazor Input is a component where the user can enter data.

Blazor Input Example

Dependencies

Register the Ignite UI for Blazor services:

// in Program.cs file

builder.Services.AddIgniteUIBlazor();

Registering IgbInputModule, the Input component’s client resource module, is optional: the component loads its resources when it first renders. Listing it in builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule)) can be used to preload resources or to support elements created only on the client (see Component Modules).

You will also need to link an additional CSS file to apply the styling to the IgbInput component. The following needs to be placed in the app’s host page (wwwroot/index.html in a standalone Blazor WebAssembly or Blazor Hybrid app, Pages/_Host.cshtml in a Blazor Server app, Components/App.razor in a Blazor Web App):

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

After we import the IgbInput component we are ready to start using it, so let’s add our first Input.

<IgbInput DisplayType="@InputType.Email" Label="Subscribe" Placeholder="john.doe@mail.com" />

Prefix & Suffix

With prefix and suffix slots we can add different content before and after the main content of the IgbInput. We recommend using a <span> element when adding simple text, symbols, or emojis, and an <igc-icon> component when adding icons to the prefix and suffix slots. In the following sample we will create a new Input field with a text prefix and an icon suffix:

Helper Text

The helper-text slot provides a hint placed below the Input. We recommend using a <span> element for the helper text. Let’s add it to our phone Input:

Input Sizing

We can allow the user to change the size of the IgbInput using the --ig-size CSS variable. То do this, we will add some radio buttons to display all size values. This way whenever one gets selected, we will change the size of the Input:

In the sample above we have demonstrated the use of the following attributes:

• required - Used to mark the input as required
• disabled - Used to disable the input
• readonly - Used to mark the input as readonly

Styling

The IgbInput component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}

API References

Additional Resources

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub