Input Group — ARC UI

Components

Input Group

input

hybrid

<arc-input-group>

Overview

Guidelines

When to use

Use for inputs that need contextual labels like "https://", "$", or ".com"
Place action buttons (copy, clear, search) in the suffix slot
Match the group `size` to the slotted input size for alignment

When not to use

Put multiple inputs inside a single input group — use one input per group
Use input group for purely decorative icons — use the input's own icon slot if available
Nest input groups inside each other

Features

Prefix and suffix addon slots for labels, icons, or buttons
Unified border and focus glow across the entire group
Automatically strips border/radius/shadow from slotted inputs
Works with arc-input, arc-select, and native HTML inputs
Three size presets: sm, md, lg
Focus-within styling highlights the entire group on input focus
Exposed CSS parts: group, prefix, content, suffix

Preview

https://

USD

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<!-- URL input with prefix -->
<arc-input-group>
  <span slot="prefix">https://</span>
  <arc-input placeholder="example.com"></arc-input>
</arc-input-group>

<!-- Currency input with prefix and suffix -->
<arc-input-group>
  <span slot="prefix">$</span>
  <arc-input type="number" placeholder="0.00"></arc-input>
  <span slot="suffix">USD</span>
</arc-input-group>

import { InputGroup, Input } from '@arclux/arc-ui-react';

<InputGroup>
  <span slot="prefix">https://</span>
  <Input placeholder="example.com" />
</InputGroup>

<InputGroup>
  <span slot="prefix">$</span>
  <Input type="number" placeholder="0.00" />
  <span slot="suffix">USD</span>
</InputGroup>

<script setup>
import { InputGroup, Input } from '@arclux/arc-ui-vue';
</script>

<template>
  <InputGroup>
    <template #prefix>https://</template>
    <Input placeholder="example.com" />
  </InputGroup>
</template>

<script>
  import { InputGroup, Input } from '@arclux/arc-ui-svelte';
</script>

<InputGroup>
  <span slot="prefix">https://</span>
  <Input placeholder="example.com" />
</InputGroup>

import { Component } from '@angular/core';
import { InputGroup, Input } from '@arclux/arc-ui-angular';

@Component({
  imports: [InputGroup, Input],
  template: `
    <InputGroup>
      <span slot="prefix">https://</span>
      <Input placeholder="example.com" />
    </InputGroup>
  `,
})
export class UrlField {}

import { InputGroup, Input } from '@arclux/arc-ui-solid';

<InputGroup>
  <span slot="prefix">https://</span>
  <Input placeholder="example.com" />
</InputGroup>

import { InputGroup, Input } from '@arclux/arc-ui-preact';

<InputGroup>
  <span slot="prefix">https://</span>
  <Input placeholder="example.com" />
</InputGroup>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-input-group — requires input-group.css + base.css (or arc-ui.css) -->
<div class="arc-input-group">
  <div class="input-group">
    <div class="input-group__addon input-group__addon--prefix">https://</div>
    <div class="input-group__content"><input placeholder="example.com" /></div>
  </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<div style="display: flex">
  <div style="display: flex; align-items: stretch; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid rgb(42, 42, 52); background: rgb(17, 17, 22)">
    <div style="display: flex; align-items: center; padding: 0 12px; background: rgb(24, 24, 32); border-right: 1px solid rgb(42, 42, 52); font-size: 14px; color: rgb(124, 124, 137);">https://</div>
    <div style="flex: 1;"><input placeholder="example.com" style="border: none; background: transparent; width: 100%; padding: 8px 12px; color: inherit;" /></div>
  </div>
</div>

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls addon padding and font size.