Input group

Joins an input with a prefix, suffix, or action.

Website domain

https://

input-group-basic-demo.tsx

"use client";import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/vip-ui/input-group";import { TextField, TextFieldLabel } from "@/components/vip-ui/text-field";export function InputGroupBasicDemo() {  return (    <TextField name="domain" className="w-full max-w-sm">      <TextFieldLabel>Website domain</TextFieldLabel>      <InputGroup>        <InputGroupAddon>https://</InputGroupAddon>        <InputGroupInput placeholder="example.com" />      </InputGroup>    </TextField>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-input-group.json

Composition

TextField or TextArea
Owns the label and validation state. Install it separately.
- InputGroup
  - InputGroupInput
    Use it in TextField.
  - InputGroupTextArea
    Use it in TextArea.
  - InputGroupAddonRepeats
    - InputGroupButtonOptional
      Fits inside the field edge at each size.

Icon

Email address

input-group-icon-demo.tsx

"use client";import { EnvelopeSimpleIcon } from "@phosphor-icons/react";import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/vip-ui/input-group";import { TextField, TextFieldLabel } from "@/components/vip-ui/text-field";export function InputGroupIconDemo() {  return (    <TextField name="email" type="email" className="w-full max-w-sm">      <TextFieldLabel>Email address</TextFieldLabel>      <InputGroup>        <InputGroupAddon>          <EnvelopeSimpleIcon aria-hidden="true" />        </InputGroupAddon>        <InputGroupInput placeholder="maya@example.com" />      </InputGroup>    </TextField>  );}

Button

input-group-demo.tsx

"use client";import { MagnifyingGlassIcon } from "@phosphor-icons/react";import { useState } from "react";import { Form } from "@/components/vip-ui/form";import {  InputGroup,  InputGroupAddon,  InputGroupButton,  InputGroupInput,} from "@/components/vip-ui/input-group";import {  TextField,  TextFieldDescription,  TextFieldError,  TextFieldLabel,} from "@/components/vip-ui/text-field";export function InputGroupDemo() {  const [query, setQuery] = useState("");  return (    <Form      className="w-full max-w-md gap-3"      onSubmit={(event) => {        event.preventDefault();      }}    >      <TextField name="project" value={query} onChange={setQuery}>        <TextFieldLabel>Find a project</TextFieldLabel>        <InputGroup>          <InputGroupAddon>            <MagnifyingGlassIcon aria-hidden="true" />          </InputGroupAddon>          <InputGroupInput placeholder="Project name" />          <InputGroupAddon>            <InputGroupButton type="submit" isDisabled={!query.trim()}>              Find            </InputGroupButton>          </InputGroupAddon>        </InputGroup>        <TextFieldDescription>Search by project name.</TextFieldDescription>        <TextFieldError />      </TextField>    </Form>  );}

Text area

Set align="block-end" on InputGroupAddon to add a row below the text.

Meeting note

0/280

Keep the decision in one place.

input-group-notes-demo.tsx

"use client";import { useState } from "react";import {  InputGroup,  InputGroupAddon,  InputGroupTextArea,} from "@/components/vip-ui/input-group";import {  TextArea,  TextAreaDescription,  TextAreaError,  TextAreaLabel,} from "@/components/vip-ui/text-area";export function InputGroupNotesDemo() {  const [note, setNote] = useState("");  return (    <div className="grid w-full max-w-md gap-3">      <TextArea name="note" value={note} onChange={setNote} maxLength={280}>        <TextAreaLabel>Meeting note</TextAreaLabel>        <InputGroup>          <InputGroupTextArea rows={3} placeholder="What did you decide?" />          <InputGroupAddon align="block-end">            <span className="me-auto text-xs">{note.length}/280</span>          </InputGroupAddon>        </InputGroup>        <TextAreaDescription>          Keep the decision in one place.        </TextAreaDescription>        <TextAreaError />      </TextArea>    </div>  );}

Disabled

Set isDisabled on the TextField. InputGroup inherits the state.

Billing email

Locked

input-group-disabled-demo.tsx

"use client";import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/vip-ui/input-group";import { TextField, TextFieldLabel } from "@/components/vip-ui/text-field";export function InputGroupDisabledDemo() {  return (    <TextField      defaultValue="billing@example.com"      isDisabled      className="w-full max-w-sm"    >      <TextFieldLabel>Billing email</TextFieldLabel>      <InputGroup>        <InputGroupInput type="email" />        <InputGroupAddon>Locked</InputGroupAddon>      </InputGroup>    </TextField>  );}

Invalid

Set isInvalid on the TextField. InputGroup inherits the state.

Website domain

https://.com

This domain is already taken.

input-group-invalid-demo.tsx

"use client";import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/vip-ui/input-group";import {  TextField,  TextFieldError,  TextFieldLabel,} from "@/components/vip-ui/text-field";export function InputGroupInvalidDemo() {  return (    <TextField defaultValue="studio" isInvalid className="w-full max-w-sm">      <TextFieldLabel>Website domain</TextFieldLabel>      <InputGroup>        <InputGroupAddon>https://</InputGroupAddon>        <InputGroupInput />        <InputGroupAddon>.com</InputGroupAddon>      </InputGroup>      <TextFieldError>This domain is already taken.</TextFieldError>    </TextField>  );}

Sizes

Set size on the TextField. The group and its icon use it.

input-group-sizes-demo.tsx

"use client";import { EnvelopeSimpleIcon } from "@phosphor-icons/react";import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/vip-ui/input-group";import { TextField } from "@/components/vip-ui/text-field";export function InputGroupSizesDemo() {  return (    <div className="grid w-full max-w-sm gap-3">      <TextField size="sm" type="email" aria-label="Email address">        <InputGroup>          <InputGroupAddon>            <EnvelopeSimpleIcon aria-hidden="true" />          </InputGroupAddon>          <InputGroupInput placeholder="maya@example.com" />        </InputGroup>      </TextField>      <TextField size="md" type="email" aria-label="Email address">        <InputGroup>          <InputGroupAddon>            <EnvelopeSimpleIcon aria-hidden="true" />          </InputGroupAddon>          <InputGroupInput placeholder="maya@example.com" />        </InputGroup>      </TextField>      <TextField type="email" aria-label="Email address">        <InputGroup>          <InputGroupAddon>            <EnvelopeSimpleIcon aria-hidden="true" />          </InputGroupAddon>          <InputGroupInput placeholder="maya@example.com" />        </InputGroup>      </TextField>      <TextField size="xl" type="email" aria-label="Email address">        <InputGroup>          <InputGroupAddon>            <EnvelopeSimpleIcon aria-hidden="true" />          </InputGroupAddon>          <InputGroupInput placeholder="maya@example.com" />        </InputGroup>      </TextField>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Group (opens in a new tab).

InputGroup

size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the group. Without a size, the group uses the size of its parent field.

InputGroupAddon

align: "inline" | "block-end" = "inline": Place text, an icon, or a button beside the input, or in a full-width row below a textarea.