InputGroup
Groups input elements with addons
Divergence from Blok
Missing InputGroupButton and InputGroupTextarea sub-components. Blok exports these in addition to the standard InputGroupAddon, InputGroupInput, and InputGroupText. If you need a button affordance inside an input group, nest a plain <Button> inside <InputGroupAddon>; for a multi-line textarea use <Textarea> standalone. Classes and slot names match Blok exactly for every sub-component we do ship.
Examples
With prefix icon
With suffix text
With addon on both sides
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| InputGroup | Container that composes an InputGroupInput with one or more InputGroupAddons into a single rounded control. Provides focus-within and aria-invalid styling for the whole group. |
| InputGroupAddon | Prefix or suffix slot within an InputGroup. Position is controlled by Align; typical contents are icons, short text, or a small Button. |
| InputGroupInput | The editable control inside an InputGroup. Renders an unstyled <input> whose border and focus ring come from the parent group. |
| InputGroupText | Muted inline text for use inside an InputGroupAddon when you need Blok's addon typography without the addon wrapper itself. |
InputGroup
Container that composes an InputGroupInput with one or more InputGroupAddons into a single rounded control. Provides focus-within and aria-invalid styling for the whole group.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the group container. | |
| ChildContent | RenderFragment? | Should contain one InputGroupInput and one or more InputGroupAddons. |
InputGroupAddon
Prefix or suffix slot within an InputGroup. Position is controlled by Align; typical contents are icons, short text, or a small Button.
| Property | Type | Required | Description |
|---|---|---|---|
| Align | InputGroupAlign | Position within the group. Default: InputGroupAlign.InlineStart. Other values: InlineEnd, BlockStart, BlockEnd. | |
| ClassName | string? | Extra CSS classes appended to the addon container. | |
| ChildContent | RenderFragment? | Addon contents — icon, text, or small button. |
InputGroupInput
The editable control inside an InputGroup. Renders an unstyled <input> whose border and focus ring come from the parent group.
| Property | Type | Required | Description |
|---|---|---|---|
| Type | string | Native <input> type. Default: "text". | |
| Value | string? | Two-way bindable current value. | |
| ValueChanged | EventCallback<string?> | Invoked on input. Pair with Value via @bind-Value. | |
| Placeholder | string? | Placeholder text shown when the value is empty. | |
| Disabled | bool | When true, disables the input. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the <input>. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <input>. |
InputGroupText
Muted inline text for use inside an InputGroupAddon when you need Blok's addon typography without the addon wrapper itself.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the text <span>. | |
| ChildContent | RenderFragment? | Text content — typically a currency code, unit, or short hint. |