RadCN
Inputsreadycomponentready

Input Group

A control shell for inputs, textareas, addons, inline actions, toolbar rows, and composed overlay triggers.

Importimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from 'radcn/input-group'
Preview

Live package example

Compose buttons, ButtonGroup, dropdowns, popovers, tooltips, spinners, labels, text addons, and textarea toolbars with the InputGroup primitive.

Example Parity

Compose buttons, ButtonGroup, dropdowns, popovers, tooltips, spinners, labels, text addons, and textarea toolbars with the InputGroup primitive.

Preview
✓
.dev
⌕
63%
Saving...
import { ButtonGroup, ButtonGroupText } from 'radcn/button-group'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'radcn/dropdown-menu'
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from 'radcn/input-group'
import { Label } from 'radcn/label'
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from 'radcn/popover'
import { Separator } from 'radcn/separator'
import { Spinner } from 'radcn/spinner'
import { Tooltip, TooltipContent, TooltipTrigger } from 'radcn/tooltip'

export function InputGroupPreview() {
  return (
    <div class="input-group-preview">
      <InputGroup ariaLabel="Repository URL">
        <InputGroupInput name="clone" readOnly value="git@github.com:radcn/radcn.git" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton ariaLabel="Copy URL" size="icon-xs">⧉</InputGroupButton>
          <Popover>
            <PopoverTrigger ariaLabel="Explain URL">?</PopoverTrigger>
            <PopoverContent>
              <PopoverTitle>Clone URL</PopoverTitle>
              <PopoverDescription>Copy behavior is app-owned enhancement.</PopoverDescription>
            </PopoverContent>
          </Popover>
        </InputGroupAddon>
      </InputGroup>

      <ButtonGroup ariaLabel="Workspace URL">
        <ButtonGroupText><Label for="workspace">https://</Label></ButtonGroupText>
        <InputGroup ariaLabel="Workspace">
          <InputGroupInput id="workspace" name="workspace" value="radcn" />
          <InputGroupAddon align="inline-end"><InputGroupText>✓</InputGroupText></InputGroupAddon>
        </InputGroup>
        <ButtonGroupText>.dev</ButtonGroupText>
      </ButtonGroup>

      <InputGroup ariaLabel="Command message">
        <InputGroupTextarea name="message" rows={4} value="Ship InputGroup parity." />
        <InputGroupAddon align="block-end">
          <DropdownMenu>
            <DropdownMenuTrigger>Commands</DropdownMenuTrigger>
            <DropdownMenuContent><DropdownMenuItem>Insert snippet</DropdownMenuItem></DropdownMenuContent>
          </DropdownMenu>
          <Separator orientation="vertical" />
          <InputGroupText>63%</InputGroupText>
          <InputGroupButton disabled>Send</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>

      <InputGroup disabled ariaLabel="Saving workspace">
        <InputGroupAddon><Spinner ariaLabel="Saving" /></InputGroupAddon>
        <InputGroupInput disabled name="workspace-status" value="radcn" />
        <InputGroupAddon align="inline-end"><InputGroupText>Saving...</InputGroupText></InputGroupAddon>
      </InputGroup>

      <InputGroup ariaLabel="Password">
        <InputGroupInput name="password" type="password" value="radical-secret" />
        <InputGroupAddon align="inline-end">
          <Tooltip>
            <TooltipTrigger ariaLabel="Password requirements">?</TooltipTrigger>
            <TooltipContent>Use at least twelve characters.</TooltipContent>
          </Tooltip>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from 'radcn/input-group'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • InputGroup renders role="group" and supports ariaLabel or ariaLabelledby for grouped controls.
  • InputGroupInput preserves native input semantics, including email, password, URL, tel, and text types.
  • Icon-only InputGroupButton actions use ariaLabel so decorative glyphs do not become the only accessible name.
  • Labels, tooltips, dropdowns, popovers, spinners, and separators keep their own RadCN semantics when composed inside addons.

Customization

  • InputGroup exposes data-radcn-input-group, addon alignment hooks, input/textarea control hooks, and button size hooks.
  • Inline addons, block addons, and toolbar rows are token-driven and can be extended with app CSS.
  • Autosizing textarea behavior is app-owned. Use InputGroupTextarea or a custom control that follows the documented control hook.
  • Icon packages are presentation choices; examples can use inline SVG, text glyphs, or app icons without changing InputGroup.

Remix 3 Notes

  • shadcn/ui asChild trigger examples map to explicit RadCN PopoverTrigger, DropdownMenuTrigger, and TooltipTrigger components.
  • React useState and useCopyToClipboard examples map to server/default state, native submitted values, route state, or app-owned browser enhancement.
  • react-textarea-autosize is not a RadCN package dependency; textarea autosize remains optional app behavior.
  • InputGroup is a layout and control-shell primitive. It composes other RadCN primitives but does not own clipboard, favorite, menu, popover, tooltip, spinner, label, separator, or autosize state.