Blazorise Addon component

Place labels, text, or buttons beside an input as a single control group.

Overview

Use addons for input prefixes, units, search buttons, or other content that helps explain or act on a form value.

Structure

An Addons container groups the input and its adjacent content. Each Addon defines one part of the group.

  • <Addons>Groups the input and addon content.
    • <Addon>Wraps an input, label, button, or icon.

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.

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

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
<Field>
    <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>
</Field>

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. 

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

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. 
<Field>
    <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>
</Field>

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

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