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)" ForId="basic-email">Email</FieldLabel>
        <RzInputText Id="basic-email" For="@(() => _model.Email)" Role="TextRole.Email" Placeholder="Enter your email..." />
    </Field>
</EditForm>

Explicit Label Association

Use FieldLabel with ForId when a control has a known Id and you need a deterministic native <label for="..."> association. The For expression supplies model metadata and validation context, while ForId guarantees the rendered HTML association. The control's Id must exactly match ForId.

ForId is different from the inherited Id parameter: Id identifies the <label> element itself, and ForId identifies the form control labeled by that element. Supplying ForId does not require a For expression or an EditForm, and FieldLabel does not verify that the target element exists elsewhere in the document.

Parameter	Applies to
`Id`	The `<label>` element itself.
`ForId`	The form control labeled by the `<label>`.

Source

<EditForm Model="_model">
    <Field>
        <FieldLabel
            Id="email-label"
            For="@(() => _model.Email)"
            ForId="account-email">
            Email address
        </FieldLabel>

        <RzInputText
            Id="account-email"
            For="@(() => _model.Email)"
            Role="TextRole.Email" />
    </Field>
</EditForm>

Accessibility

A valid native label association improves screen-reader control announcements, expands click and tap targeting to the visible label, and helps automated accessibility validation. Placeholder text is not a substitute for a visible associated label.

When ForId is omitted, null, empty, or whitespace, FieldLabel preserves the existing automatic lookup based on For, the current form context, and the registered field map. If neither explicit nor automatic resolution finds a target ID, the for attribute is omitted. Prefer ForId when the control has an explicit ID, deterministic static HTML is required, an accessibility audit is validating label associations, or composition makes implicit registration uncertain.

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>

Component Parameters

RzInputText

Property	Description	Type	Default
`For`	Bound expression for model value and validation metadata.	`Expression<Func<string>>`	Required
`Role`	Semantic input type role.	`TextRole`	`TextRole.Text`
`Placeholder`	Placeholder content.	`string?`	`null`

FieldLabel

Property	Description	Type	Default
`For`	Expression used for model metadata, display-name inference, and automatic field-map lookup when `ForId` is not supplied.	`Expression<Func<TValue>>?`	`null`
`ForId`	Explicitly identifies the form control associated with the label. When supplied, `ForId` is rendered as the label's HTML `for` attribute and takes precedence over automatic ID resolution from `For`.	`string?`	`null`
`Id`	Inherited element ID for the `<label>` itself. This does not identify the labeled control.	`string`	Generated
`DisplayName`	Explicit label text used when no child content is supplied.	`string?`	`null`