Components / Input Group

Input Group

An input with leading or trailing addons. A bordered flex row groups an addon (icon or text) with a borderless input so the two read as a single control.

Quick reference

Part	Role
ZitsInputGroup	Bordered flex row; owns the border, ring, and focus seam
ZitsInputGroupAddon	Leading or trailing slot for an icon or short text
ZitsInputGroupInput	Borderless input that fills the row

Examples

Place a ZitsInputGroupAddon before the input for a leading icon or prefix.

razor

<ZitsInputGroup>
    <ZitsInputGroupAddon>
        <SearchIcon />
    </ZitsInputGroupAddon>
    <ZitsInputGroupInput type="search" placeholder="Search..." />
</ZitsInputGroup>

Use a text addon for a prefix such as a protocol or unit.

https://

razor

<ZitsInputGroup>
    <ZitsInputGroupAddon>https://</ZitsInputGroupAddon>
    <ZitsInputGroupInput placeholder="acme.com" />
</ZitsInputGroup>

Trailing addon

Put the ZitsInputGroupAddon after the input for a trailing unit or suffix.

USD

razor

<ZitsInputGroup>
    <ZitsInputGroupInput type="number" placeholder="0.00" />
    <ZitsInputGroupAddon>USD</ZitsInputGroupAddon>
</ZitsInputGroup>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add input-group --to ./src/MyApp --namespace MyApp.Ui

API reference

ZitsInputGroup and ZitsInputGroupAddon render a div and take ChildContent. ZitsInputGroupInput renders an input. All three splat unmatched attributes (incl. type, placeholder, value, and class).

Prop	Type	Default
ChildContent	RenderFragment?	-
Attributes	IDictionary<string, object>?	-