Blazorise Addon component

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

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.

  • <Addons>
    • <Addon>

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.

Static addon

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

With multiple addons

Addons are used to attach controls together.
Start End
<Addons>
    <Addon AddonType="AddonType.Start">
        <AddonLabel>Start</AddonLabel>
    </Addon>
    <Addon AddonType="AddonType.Body">
        <TextEdit Placeholder="Placeholder" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <AddonLabel>End</AddonLabel>
    </Addon>
</Addons>

Button addon

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

Dropdown addon

<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">
        <TextEdit />
    </Addon>
</Addons>

Attributes

Addons

Name Description Type Default
Size Addons size variations. Size Default

Addon

Name Description Type Default
AddonType Defines the location and behavior of addon container. AddonType Body