Input Group

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

https://

BriefOptional

Prop reference

Auto-generated from the component source

InputGroup

className

React.ComponentProps<"div">

InputGroupAddon

className
align = "inline-start"

React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>

InputGroupButton

className
type = "button"
variant = "ghost"
size = "xs"

Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>

InputGroupInput

className

React.ComponentProps<"input">

InputGroupText

className

React.ComponentProps<"span">

InputGroupTextarea

className

Code

// owner: Sona
"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupTextarea,
  InputGroupText,
} from "@/components/ui/input-group";

export default function InputGroupExample() {
  return (
    <div className="space-y-6">
      <InputGroup>
        <InputGroupAddon>https://</InputGroupAddon>
        <InputGroupInput placeholder="project.aicu.app" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton size="sm">Launch</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup className="h-auto">
        <InputGroupAddon align="block-start">
          Brief
          <InputGroupText className="text-xs text-muted-foreground">
            Optional
          </InputGroupText>
        </InputGroupAddon>
        <InputGroupTextarea
          rows={3}
          placeholder="What problem are we solving?"
        />
      </InputGroup>
    </div>
  );
}

Input Group

Component preview

On this page

Command Palette