Input Group

Website

https://.com

Shown on your public profile.

import { TextField } from "react-aria-components";
import { Description, Label } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function InputGroupDemo() {
  return (
    <TextField
      defaultValue="harborpine"
      className="group/field flex w-full max-w-sm flex-col gap-1.5"
    >
      <Label>Website</Label>
      <InputGroup>
        <InputGroupAddon variant="segment">https://</InputGroupAddon>
        <InputGroupInput />
        <InputGroupAddon variant="segment">.com</InputGroupAddon>
      </InputGroup>
      <Description>Shown on your public profile.</Description>
    </TextField>
  );
}

Installation

$ pnpm dlx shadcn@latest add @desyne/input-group

The CLI installs dependencies and any other components this one uses.

Usage

tsx

import { TextField } from "react-aria-components";
import { Label } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";

tsx

<TextField className="group/field flex flex-col gap-1.5">
  <Label>Website</Label>
  <InputGroup>
    <InputGroupAddon variant="segment">https://</InputGroupAddon>
    <InputGroupInput />
    <InputGroupAddon variant="segment">.com</InputGroupAddon>
  </InputGroup>
</TextField>

InputGroup is the same chrome as every other field (FieldGroup from field.tsx) with the padding moved onto its parts. Put it inside a React Aria field and InputGroupInput picks up the value, label, description and validation from the field.

TextField already has prefix and suffix

For a single icon or short text inside the field, Text Field's prefix and suffix props are enough. Reach for Input Group when you need flush segments, buttons, several addons, or a NumberField.

When to use

Input Group: fixed parts of a value (protocol, domain, unit, currency) or actions that act on the input (copy, reveal, clear, submit).
Text Field: a plain input, optionally with one icon or text adornment.
Search Field: search with a built-in clear button.
Number Field: numbers with stepper buttons.

Anatomy

tsx

<TextField>                         {/* or NumberField, SearchField */}
  <Label />
  <InputGroup>                      {/* role="group", draws the border and focus ring */}
    <InputGroupAddon />             {/* inline text or icon, or a flush segment */}
    <InputGroupInput />             {/* the <input> */}
    <InputGroupButton />            {/* ghost button inside, or a flush segment */}
  </InputGroup>
  <Description />
  <FieldError />
</TextField>

Part	Renders	Notes
`InputGroup`	React Aria `Group` (`role="group"`)	Field chrome with `variant` (outline, filled, underlined) and `size`. Shows the focus ring when anything inside has focus, and the invalid style when the field is invalid.
`InputGroupInput`	React Aria `Input`	Bare input that fills the space. Pads itself only at the group's edges.
`InputGroupAddon`	`<span>`	`inline`: muted text or icon inside the field. `segment`: a flush, tinted box divided by a border.
`InputGroupButton`	React Aria `Button`	`ghost` (default): a small icon button inside the field. `segment`: a flush, full-height button divided by a border.

Examples

Icons and inline text

Inline addons sit inside the border, before or after the input: a search icon, a Kbd shortcut, a character count.

⌘K

Username

12/20

import { AtSignIcon, MailIcon, SearchIcon } from "lucide-react";
import { TextField } from "react-aria-components";
import { Label } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

export default function InputGroupIcons() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <TextField aria-label="Search docs">
        <InputGroup>
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
          <InputGroupInput placeholder="Search docs" />
          <InputGroupAddon>
            <Kbd>⌘K</Kbd>
          </InputGroupAddon>
        </InputGroup>
      </TextField>
      <TextField className="group/field flex flex-col gap-1.5" type="email">
        <Label>Email</Label>
        <InputGroup>
          <InputGroupAddon>
            <MailIcon />
          </InputGroupAddon>
          <InputGroupInput placeholder="you@company.com" />
        </InputGroup>
      </TextField>
      <TextField className="group/field flex flex-col gap-1.5">
        <Label>Username</Label>
        <InputGroup>
          <InputGroupAddon>
            <AtSignIcon />
          </InputGroupAddon>
          <InputGroupInput placeholder="maya" />
          <InputGroupAddon className="text-xs">12/20</InputGroupAddon>
        </InputGroup>
      </TextField>
    </div>
  );
}

Buttons

InputGroupButton defaults to a 24px ghost icon button. Give icon-only buttons an aria-label. For a password toggle, switch the field's type.

API key

Keep this secret. It has full access.

Password

import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
import { useState } from "react";
import { TextField } from "react-aria-components";
import { Description, Label } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";

const apiKey = "sk_live_51Hx9fK2aQ4mZ8rT";

export default function InputGroupButtons() {
  const [copied, setCopied] = useState(false);
  const [visible, setVisible] = useState(false);
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <TextField
        value={apiKey}
        isReadOnly
        className="group/field flex flex-col gap-1.5"
      >
        <Label>API key</Label>
        <InputGroup>
          <InputGroupInput className="font-mono text-xs" />
          <InputGroupButton
            aria-label={copied ? "Copied" : "Copy API key"}
            onPress={() => {
              navigator.clipboard?.writeText(apiKey);
              setCopied(true);
              setTimeout(() => setCopied(false), 1500);
            }}
          >
            {copied ? <CheckIcon className="text-success" /> : <CopyIcon />}
          </InputGroupButton>
        </InputGroup>
        <Description>Keep this secret. It has full access.</Description>
      </TextField>
      <TextField
        type={visible ? "text" : "password"}
        defaultValue="correct-horse-battery"
        className="group/field flex flex-col gap-1.5"
      >
        <Label>Password</Label>
        <InputGroup>
          <InputGroupInput />
          <InputGroupButton
            aria-label={visible ? "Hide password" : "Show password"}
            onPress={() => setVisible((v) => !v)}
          >
            {visible ? <EyeOffIcon /> : <EyeIcon />}
          </InputGroupButton>
        </InputGroup>
      </TextField>
    </div>
  );
}

Segment button

variant="segment" turns the button into a flush, full-height part of the field, for actions like Subscribe or Apply. type="submit" submits the surrounding form.

import { useState } from "react";
import { Form, TextField } from "react-aria-components";
import { FieldError, Label } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function InputGroupSegmentButton() {
  const [joined, setJoined] = useState<string | null>(null);
  return (
    <Form
      className="w-full max-w-sm"
      onSubmit={(e) => {
        e.preventDefault();
        setJoined(String(new FormData(e.currentTarget).get("email")));
      }}
    >
      <TextField
        name="email"
        type="email"
        isRequired
        className="group/field flex flex-col gap-1.5"
      >
        <Label>Newsletter</Label>
        <InputGroup>
          <InputGroupInput placeholder="you@company.com" />
          <InputGroupButton type="submit" variant="segment">
            Subscribe
          </InputGroupButton>
        </InputGroup>
        <FieldError />
      </TextField>
      {joined && (
        <p role="status" className="mt-2 text-muted-foreground text-sm">
          Subscribed {joined}. Check your inbox to confirm.
        </p>
      )}
    </Form>
  );
}

Currency and units

The same parts work inside a React Aria NumberField: the input is formatted and parsed in the user's locale, and Up and Down arrows change the value.

Amount

$USD

Charged on the 1st of each month.

Weight

import { NumberField } from "react-aria-components";
import { Description, Label } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function InputGroupCurrency() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <NumberField
        defaultValue={1250}
        minValue={0}
        formatOptions={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }}
        className="group/field flex flex-col gap-1.5"
      >
        <Label>Amount</Label>
        <InputGroup>
          <InputGroupAddon>$</InputGroupAddon>
          <InputGroupInput className="tabular-nums" />
          <InputGroupAddon variant="segment">USD</InputGroupAddon>
        </InputGroup>
        <Description>Charged on the 1st of each month.</Description>
      </NumberField>
      <NumberField
        defaultValue={72.5}
        minValue={0}
        maxValue={500}
        className="group/field flex flex-col gap-1.5"
      >
        <Label>Weight</Label>
        <InputGroup>
          <InputGroupInput className="tabular-nums" />
          <InputGroupAddon>kg</InputGroupAddon>
        </InputGroup>
      </NumberField>
    </div>
  );
}

Variants and sizes

variant and size work as on every other field. Underlined groups drop the side padding so content lines up with the underline.

https://

import { LinkIcon } from "lucide-react";
import { TextField } from "react-aria-components";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function InputGroupVariants() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {(["outline", "filled", "underlined"] as const).map((variant) => (
        <TextField key={variant} aria-label={`Link (${variant})`}>
          <InputGroup variant={variant}>
            <InputGroupAddon>
              <LinkIcon />
            </InputGroupAddon>
            <InputGroupInput placeholder={`${variant} · paste a link`} />
          </InputGroup>
        </TextField>
      ))}
      {(["sm", "lg"] as const).map((size) => (
        <TextField key={size} aria-label={`Website (${size})`}>
          <InputGroup size={size}>
            <InputGroupAddon variant="segment">https://</InputGroupAddon>
            <InputGroupInput placeholder={`size ${size}`} />
          </InputGroup>
        </TextField>
      ))}
    </div>
  );
}

Accessibility

The input gets its name from the surrounding field's Label (or aria-label on the field), and its description and error message through React Aria.
InputGroup is a React Aria Group with role="group". The focus ring is drawn on the group when the input or a button inside it has focus, so it always wraps the full field.
Addons are plain text. A screen reader user won't hear "https://" when focusing the input; if the prefix matters, mention it in the label or description ("Website, without https://").
Buttons are separate tab stops after (or before) the input. Icon-only buttons need an aria-label, and buttons that change state (copy, reveal) should update it ("Copied", "Hide password").

Styling

Data attributes

Attribute	On	Values
`data-slot="input-group"`	`InputGroup`	Always, plus React Aria's `data-focus-within`, `data-hovered`, `data-invalid`, `data-disabled`
`data-slot="input-group-input"`	`InputGroupInput`	Always
`data-slot="input-group-addon"`	`InputGroupAddon`	Always
`data-slot="input-group-button"`	`InputGroupButton`	Always
`data-variant`	Addon, button	`inline` · `segment` / `ghost` · `segment`

Also accepts every prop of React Aria's Group.

InputGroupAddon

Prop

Type

Also accepts every prop of <span>.

InputGroupButton