Inputs

The RzInputText and RzInputNumber components are versatile inputs for capturing user data. They can be used standalone within a form or composed with RzInputGroup to include addons like icons, text, and buttons.

Form Integration

All input components must be placed within an EditForm and bound to a model property using the For parameter to enable validation and data binding.

Basic Inputs

A standard text input with a label and placeholder.

Source

<EditForm Model="_model">
    <Field>
        <FieldLabel For="@(() => _model.Email)">Email</FieldLabel>
        <RzInputText For="@(() => _model.Email)" Placeholder="Enter your email..." />
    </Field>
</EditForm>

Input Roles

Use the Role parameter on RzInputText to specify the input type, which provides better semantics and can trigger appropriate mobile keyboards.

Source

<RzFieldSet>
    <Field>
        <FieldLabel For="@(() => _model.Password)">Password</FieldLabel>
        <RzInputText For="@(() => _model.Password)" Role="TextRole.Password" Placeholder="Enter your password" />
    </Field>
    <Field>
        <FieldLabel For="@(() => _model.Search)">Search</FieldLabel>
        <RzInputText For="@(() => _model.Search)" Role="TextRole.Search" Placeholder="Search..." />
    </Field>
</RzFieldSet>

Number Input

The RzInputNumber component is designed for numeric input.

Source

<Field>
    <FieldLabel For="@(() => _model.Quantity)">Quantity</FieldLabel>
    <RzInputNumber TValue="int" For="@(() => _model.Quantity)" />
</Field>

Disabled

Add the disabled attribute to make an input non-interactive.

Source

<RzInputText For="@(() => _model.Email)" Placeholder="Email" disabled />

Input Group

Use RzInputGroup to compose inputs with addons like icons, text, and buttons.

Source

<RzFieldSet>
    <!-- With Icon -->
    <RzInputGroup>
        <InputGroupInput For="@(() => _model.Search)" Placeholder="Search..." />
        <InputGroupAddon>
            <Blazicon Svg="MdiIcon.Magnify" />
        </InputGroupAddon>
    </RzInputGroup>

    <!-- With Text Addon -->
    <RzInputGroup>
        <InputGroupAddon>
            <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput For="@(() => _model.Website)" Placeholder="example.com" />
    </RzInputGroup>

    <!-- With Button Addon -->
    <RzInputGroup>
        <InputGroupInput For="@(() => _model.Coupon)" Placeholder="Enter coupon code" />
        <InputGroupAddon>
            <InputGroupButton Variant="ThemeVariant.Primary">Apply</InputGroupButton>
        </InputGroupAddon>
    </RzInputGroup>
</RzFieldSet>

Complex Input Group

Combine multiple addons, including buttons with dropdowns, for more complex interactions.

Source

<RzInputGroup>
    <InputGroupTextarea For="@(() => _model.Message)" Placeholder="Ask, Search or Chat..." />
    <InputGroupAddon Align="InputGroupAddonAlign.BlockEnd">
        <InputGroupButton Variant="ThemeVariant.Primary" Outline class="rounded-full" Size="InputGroupButtonSize.IconExtraSmall">
            <Blazicon Svg="MdiIcon.Plus" />
        </InputGroupButton>
        <RzDropdownMenu>
            <DropdownMenuTrigger AsChild>
                <InputGroupButton Variant="ThemeVariant.Ghost">Auto</InputGroupButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuItem>Auto</DropdownMenuItem>
                <DropdownMenuItem>Agent</DropdownMenuItem>
                <DropdownMenuItem>Manual</DropdownMenuItem>
            </DropdownMenuContent>
        </RzDropdownMenu>
        <InputGroupText class="ml-auto">52% used</InputGroupText>
        <RzSeparator Orientation="Orientation.Vertical" class="!h-4" />
        <InputGroupButton Variant="ThemeVariant.Primary" class="rounded-full" Size="InputGroupButtonSize.IconExtraSmall" disabled>
            <Blazicon Svg="MdiIcon.ArrowUp" />
            <span class="sr-only">Send</span>
        </InputGroupButton>
    </InputGroupAddon>
</RzInputGroup>

Loading State

Indicate a loading or processing state by adding an RzSpinner to an addon.

Source

<RzInputGroup>
    <InputGroupInput For="@(() => _model.Search)" Placeholder="Searching..." disabled />
    <InputGroupAddon>
        <RzSpinner Size="Size.ExtraSmall" />
    </InputGroupAddon>
</RzInputGroup>