Blazorise Addon component

Easily extend form controls by adding text, or buttons on either side of textual inputs, custom selects, and custom file inputs.

Overview

The <Addon> component is the easiest way to add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback.

Structure

  • <Addons> main container, used to wrap the input field and the addon content.

    • <Addon> wrapper for addon content, such as labels, buttons, or icons.

To define addon location you have to set the AddonType attribute:

  • .Start will place addon on the left side.

  • .Body will place it in the middle.

  • .End will place it at the right side.

Examples

Static label

By incorporating this static label, users are given a precise indication of the expected input, ensuring they enter a suitable username for their account. This Addon design results in a more intuitive and user-friendly interface, making the registration process seamless and efficient.

@ 
<Addons>
    <Addon AddonType="AddonType.Start">
        <AddonLabel>@@</AddonLabel>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextInput Placeholder="Username" />
    </Addon>
</Addons>

Multiple addons

In this example, an Addon component is used to incorporate multiple labels alongside an input field, enhancing user experience by providing clear guidance and structure.

Start End
<Addons>
    <Addon AddonType="AddonType.Start">
        <AddonLabel>Start</AddonLabel>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextInput Placeholder="Placeholder" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <AddonLabel>End</AddonLabel>
    </Addon>
</Addons>

Button addon

In this example, we have an Addon component that features a simple button alongside an input field.

Imagine a scenario where users need to enter a numerical value into the input field, such as a quantity for a shopping cart. The Addon component integrates a button labeled "Add" next to the input field. When users enter a quantity and click the "Add" button, the desired item and its corresponding quantity are added to the shopping cart. This Addon design provides a user-friendly interface, allowing for seamless interaction with the input field and button. 

<Addons>
    <Addon AddonType="AddonType.Body">
        <TextInput Placeholder="Recipient's username" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <Button Color="Color.Secondary">Button</Button>
    </Addon>
</Addons>

Dropdown addon

Consider a scenario where you have a search input field, and you want to give users the option to select a search category from a Dropdown button before executing the search. This Addon component combines the input field with the Dropdown button for a seamless user experience. 
<Addons>
    <Addon AddonType="AddonType.Start">
        <Dropdown>
            <DropdownToggle Color="Color.Primary">Dropdown</DropdownToggle>
            <DropdownMenu>
                <DropdownItem>Action</DropdownItem>
                <DropdownItem>Another action</DropdownItem>
                <DropdownItem>Something else here</DropdownItem>
                <DropdownDivider />
                <DropdownItem>Separated link</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextInput />
    </Addon>
</Addons>

Validation

Inputs inside Addons use the regular Feedback content. Validation messages are automatically placed below the input group so they do not disrupt its layout or addon border radii.

This is a label
<Addons>
    <Addon AddonType="AddonType.Body">
        <Validation Validator="ValidationRule.IsNotEmpty">
            <TextInput Placeholder="Enter name">
                <Feedback>
                    <ValidationNone />
                    <ValidationSuccess />
                    <ValidationError>Enter valid name!</ValidationError>
                </Feedback>
            </TextInput>
        </Validation>
    </Addon>
    <Addon AddonType="AddonType.End">
        <AddonLabel>This is a label</AddonLabel>
    </Addon>
</Addons>

Best Practices

Keep Context Compact

Addons work best for brief, familiar context such as currency symbols, units, or URL prefixes. Keep the field's actual label outside the addon, and avoid addon content that competes with the editable value or leaves too little input space on smaller screens.

Field Meaning

Treat addon text as presentation rather than part of the submitted value, and validate the complete value in application code. When an addon contains a button, describe a clear action and provide an accessible label if the button uses only an icon.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page