BrutalLab UI
en
EnglishEspañol
PrimitiveAvailable

Input Group

An input with aligned prefixes, suffixes, and supporting actions.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/input-group.json

Usage

Import the component into your project and keep the source code under your control.

tsx
'use client';

import {
  InputGroup,
  InputGroupInput,
  InputGroupAddon,
  InputGroupText,
} from '@/components/ui/input-group';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <div className="grid w-full max-w-md gap-2">
      <Label htmlFor="website">Website</Label>
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput id="website" placeholder="example.com" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • Rest, filled, focus, invalid and disabled. Invalid fields use aria-invalid and an associated message, not color alone.
  • Hover never validates a field. The application decides when to show errors.
  • Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
InputGroupAddon.aligninline-start / inline-end / block-start / block-endinline-startAddon position.

Accessibility

Rules that should remain intact when adapting the component to a product.

Label the editable input, not only its visual group. Name any icon-only action.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.