saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Input Group

Input Group

Groups inputs with addons or buttons.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/input-group

Usage

import { InputGroup } from "@/components/ui/input-group"
<InputGroup>
  <span>$</span>
  <Input type="number" />
  <Button>Submit</Button>
</InputGroup>

Examples

With Icons

Loading...
Input groups with icon addons.

With Button

Loading...
Input group with action button.

With Textarea

Loading...
Textarea with addon button.

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode—Input and addon elements.

On This Page

  • Installation
  • Usage
  • Examples
  • With Icons
  • With Button
  • With Textarea
  • API Reference
⌘K
USD