Input Group
Input groups combine a text input with leading or trailing addons such as prefixes, icons, and buttons.
Try it
https://
Include only the domain — the protocol is added automatically.
Usage
Wrap RuiInput and addons inside RuiInputGroup. Nest the group inside RuiField for labels and validation.
import { RuiField, RuiFieldDescription } from '@ecopages/radiant-ui/field';
import { RuiInput } from '@ecopages/radiant-ui/input';
import {
RuiInputGroup,
RuiInputGroupAddon,
RuiInputGroupText,
} from '@ecopages/radiant-ui/input-group';
import { RuiLabel } from '@ecopages/radiant-ui/label';
<RuiField name="url">
<RuiLabel>Website URL</RuiLabel>
<RuiInputGroup>
<RuiInputGroupAddon>
<RuiInputGroupText>https://</RuiInputGroupText>
</RuiInputGroupAddon>
<RuiInput id="input-group-url" placeholder="example.com" />
</RuiInputGroup>
<RuiFieldDescription>Include only the domain.</RuiFieldDescription>
</RuiField>Trailing actions
Use RuiInputGroupAddon align="end" for trailing icons or a RuiButton with variant="ghost" and size="sm" square.
Field integration
RuiField still discovers the nested RuiInput via data-rui-control. Invalid and disabled states propagate to the group border via :has() selectors.
API
RuiInputGroup, RuiInputGroupAddon, and RuiInputGroupText are presentational JSX views, no custom elements.
RuiInputGroupAddon props
| Prop | Type | Default | Description |
|---|---|---|---|
align | start · end | start | Inline edge for the addon. |
CSS classes
| Class | Description |
|---|---|
.rui-input-group | Control-height bordered row (role="group"). |
.rui-input-group__addon | Addon cell. |
.rui-input-group__addon--start | Leading addon. |
.rui-input-group__addon--end | Trailing addon. |
.rui-input-group__text | Muted inline text in an addon. |