Input Group

Display additional information or actions inside an input.

12 results

<InputGroup className="max-w-xs">
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>

Installation

pnpm dlx cubix@latest add input-group --base radix

Usage

Import

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

Example

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Composition

Use the following composition to build an InputGroup:

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

Align

Use the align prop on InputGroupAddon to position the addon relative to the input. For proper focus management, place InputGroupAddon after the control in the DOM and use align for visual position.

inline-start

Use align="inline-start" to position the addon at the start of the input. This is the default.

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-start">
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

inline-end

Use align="inline-end" to position the addon at the end of the input.

<InputGroup>
  <InputGroupInput type="password" placeholder="Enter password" />
  <InputGroupAddon align="inline-end">
    <EyeOffIcon />
  </InputGroupAddon>
</InputGroup>

block-start

Use align="block-start" to position the addon above the input.

<InputGroup>
  <InputGroupInput placeholder="Enter your name" />
  <InputGroupAddon align="block-start">
    <InputGroupText>Full Name</InputGroupText>
  </InputGroupAddon>
</InputGroup>

block-end

Use align="block-end" to position the addon below the input.

<InputGroup>
  <InputGroupTextarea placeholder="Write a comment..." />
  <InputGroupAddon align="block-end">
    <InputGroupText>0/280</InputGroupText>
    <InputGroupButton variant="default" size="sm" className="ml-auto">
      Post
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Icon

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Text

USD

https://

.com

@company.com

120 characters left

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="0.00" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Button

https://

<InputGroup>
  <InputGroupInput placeholder="Type to search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton variant="secondary">Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Kbd

⌘K

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <Kbd>⌘K</Kbd>
  </InputGroupAddon>
</InputGroup>

Dropdown

<InputGroup>
  <InputGroupInput placeholder="Enter file name" />
  <InputGroupAddon align="inline-end">
    <DropdownMenu>
      <DropdownMenuTrigger render={<InputGroupButton size="icon-xs" />}>
        <MoreHorizontalIcon />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>Settings</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </InputGroupAddon>
</InputGroup>

Spinner

Saving...

Please wait...

<InputGroup>
  <InputGroupInput placeholder="Searching..." />
  <InputGroupAddon align="inline-end">
    <LoaderIcon className="animate-spin" />
  </InputGroupAddon>
</InputGroup>

Textarea

Line 1, Column 1

script.js

<InputGroup>
  <InputGroupTextarea placeholder="console.log('Hello, world!');" />
  <InputGroupAddon align="block-start" className="border-b">
    <InputGroupText>script.js</InputGroupText>
  </InputGroupAddon>
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupButton size="sm" variant="default" className="ml-auto">
      Run
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

API Reference

InputGroup

The main component that wraps inputs and addons.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

InputGroupAddon

Displays icons, text, buttons, or other content alongside inputs. Place it after the input in the DOM and set align for visual position. Prefer inline-* with InputGroupInput and block-* with InputGroupTextarea.

Prop	Type	Default	Description
align	"inline-start" \| "inline-end" \| "block-start" \| "block-end"	"inline-start"	Visual position of the addon. Place the addon after the control in the DOM for focus management.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

InputGroupButton

Displays buttons within input groups.

Prop	Type	Default	Description
size	"xs" \| "icon-xs" \| "sm" \| "icon-sm"	"xs"	Size of the button inside the input group.
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"ghost"	Visual style of the button.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

InputGroupInput

Replacement for Input inside groups. Uses data-slot="input-group-control" for focus styling.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

InputGroupTextarea

Replacement for Textarea inside groups.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

InputGroupText

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).