Input Group

<InputGroup className="max-w-xs">
  <InputGroupAddon>https://</InputGroupAddon>
  <Input placeholder="example.com" />
</InputGroup>

Installation

Set up dotUI first — export your design system from the Studio, which registers @dotui in your project. See Installation.

pnpm dlx shadcn@latest add @dotui/input

Usage

import { Input, InputGroup, InputGroupAddon } from "@/components/ui/input"

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <Input placeholder="example.com" />
</InputGroup>

Anatomy

An InputGroup wraps an Input or TextArea together with one or more InputGroupAddon parts. Order the children to place an addon before or after the control.

import {
  Input,
  InputGroup,
  InputGroupAddon,
  TextArea,
} from "@/components/ui/input"

<InputGroup>
  <InputGroupAddon />
  <Input />
  <InputGroupAddon />
</InputGroup>

• InputGroup — the wrapper; clicking anywhere inside focuses the control.
• InputGroupAddon — a slot for buttons, icons, labels, or Kbd alongside the control.
• Input / TextArea — the wrapped control.

Cell addons

Set variant="cell" on an InputGroupAddon to set it in its own cell, divided by the field's edge. Shells without a side edge keep it inline.

<TextField className="w-full max-w-xs">
  <Label>Website</Label>
  <InputGroup>
    <InputGroupAddon variant="cell">https://</InputGroupAddon>
    <Input placeholder="example" />
    <InputGroupAddon variant="cell">.com</InputGroupAddon>
  </InputGroup>
</TextField>

Sizes

Set size on the InputGroup to scale the group and its control. Available sizes are sm, md (default), and lg.

<InputGroup size="sm">…</InputGroup>
<InputGroup size="md">…</InputGroup>
<InputGroup size="lg">…</InputGroup>

Examples

API Reference