Input Group

Add addons, buttons, and helper content to inputs.

12 results

1
import {
2
  InputGroup,
3
  InputGroupAddon,
4
  InputGroupInput,
5
} from "@/components/ui/pxl/input-group";
6

7
export default function InputGroupDemo() {
8
  return (
9
    <InputGroup className="max-w-xs">
10
      <InputGroupInput placeholder="Search..." />
11
      <InputGroupAddon>
12
        <svg
13
          xmlns="http://www.w3.org/2000/svg"
14
          fill="currentColor"
15
          viewBox="0 0 24 24"
16
        >
17
          <path d="M22 22h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm-6-2H6v-2h8v2Zm4 0h-2v-2h2v2ZM6 16H4v-2h2v2Zm10 0h-2v-2h2v2ZM4 14H2V6h2v8Zm14 0h-2V6h2v8ZM6 6H4V4h2v2Zm10 0h-2V4h2v2Zm-2-2H6V2h8v2Z" />
18
        </svg>
19
      </InputGroupAddon>
20
      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
21
    </InputGroup>
22
  );
23
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/input-group

Copy and paste the following code into your project.

1
"use client";
2

3
import { cva, type VariantProps } from "class-variance-authority";
4
import type { ComponentProps } from "react";
5

6
import { Button } from "@/components/ui/pxl/button";
7
import { Input } from "@/components/ui/pxl/input";
8
import { Textarea } from "@/components/ui/pxl/textarea";
9
import { cn } from "@/lib/utils";
10

11
function InputGroup({ className, ...props }: ComponentProps<"div">) {
12
  return (
13
    // biome-ignore lint/a11y/useSemanticElements: input group
14
    <div
15
      data-slot="input-group"
16
      role="group"
17
      className={cn(
18
        "group/input-group relative flex h-9 w-full min-w-0 items-center pixel-rounded pixel-border pixel-size-[3px] transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:[--pixel-color:inherit] has-[[data-slot=input-group-control]:focus-visible]:pixel-color-ring has-[[data-slot][aria-invalid=true]]:pixel-color-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:pixel-color-input has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
19
        className,
20
      )}
21
      {...props}
22
    />
23
  );
24
}
25

26
const inputGroupAddonVariants = cva(
27
  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>svg:not([class*='size-'])]:size-4",
28
  {
29
    variants: {
30
      align: {
31
        "inline-start":
32
          "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
33
        "inline-end":
34
          "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
35
        "block-start":
36
          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
37
        "block-end":
38
          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
39
      },
40
    },
41
    defaultVariants: {
42
      align: "inline-start",
43
    },
44
  },
45
);
46

47
function InputGroupAddon({
48
  className,
49
  align = "inline-start",
50
  ...props
51
}: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
52
  return (
53
    // biome-ignore lint/a11y/useSemanticElements: input group addon
54
    <div
55
      role="group"
56
      data-slot="input-group-addon"
57
      data-align={align}
58
      className={cn(inputGroupAddonVariants({ align }), className)}
59
      onClick={(e) => {
60
        if ((e.target as HTMLElement).closest("button")) {
61
          return;
62
        }
63
        e.currentTarget.parentElement?.querySelector("input")?.focus();
64
      }}
65
      {...props}
66
    />
67
  );
68
}
69

70
const inputGroupButtonVariants = cva(
71
  "flex items-center gap-2 text-sm shadow-none",
72
  {
73
    variants: {
74
      size: {
75
        xs: "h-6 gap-1 pixel-size-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
76
        sm: "",
77
        "icon-xs": "size-6 pixel-size-md p-0 has-[>svg]:p-0",
78
        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
79
      },
80
    },
81
    defaultVariants: {
82
      size: "xs",
83
    },
84
  },
85
);
86

87
function InputGroupButton({
88
  className,
89
  type = "button",
90
  variant = "ghost",
91
  size = "xs",
92
  ...props
93
}: Omit<ComponentProps<typeof Button>, "size" | "type"> &
94
  VariantProps<typeof inputGroupButtonVariants> & {
95
    type?: "button" | "submit" | "reset";
96
  }) {
97
  return (
98
    <Button
99
      type={type}
100
      data-size={size}
101
      variant={variant}
102
      className={cn(inputGroupButtonVariants({ size }), className)}
103
      {...props}
104
    />
105
  );
106
}
107

108
function InputGroupText({ className, ...props }: ComponentProps<"span">) {
109
  return (
110
    <span
111
      className={cn(
112
        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
113
        className,
114
      )}
115
      {...props}
116
    />
117
  );
118
}
119

120
function InputGroupInput({ className, ...props }: ComponentProps<"input">) {
121
  return (
122
    <Input
123
      data-slot="input-group-control"
124
      className={cn(
125
        "flex-1 pixel-size-[0px] pixel-color-[transparent] has-[input:focus-visible]:pixel-color-[transparent]",
126
        className,
127
      )}
128
      {...props}
129
    />
130
  );
131
}
132

133
function InputGroupTextarea({
134
  className,
135
  ...props
136
}: ComponentProps<"textarea">) {
137
  return (
138
    <Textarea
139
      data-slot="input-group-control"
140
      className={cn(
141
        "flex-1 resize-none py-2 pixel-size-[0px] pixel-color-[transparent] has-[textarea:focus-visible]:pixel-color-[transparent]",
142
        className,
143
      )}
144
      {...props}
145
    />
146
  );
147
}
148

149
export {
150
  InputGroup,
151
  InputGroupAddon,
152
  InputGroupButton,
153
  InputGroupInput,
154
  InputGroupText,
155
  InputGroupTextarea,
156
};

Update the import paths to match your project setup.

Usage

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

<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.

Default

For proper focus management, InputGroupAddon should always be placed after InputGroupInput or InputGroupTextarea in the DOM. Use the align prop to visually position the addon.

inline-start

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

inline-end

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

block-start

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

block-end

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

Custom Input

Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.

API Reference

InputGroup

The main component that wraps inputs and addons.

Prop	Type	Default
`className`	`string`

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

Displays icons, text, buttons, or other content alongside inputs.

Focus Navigation

For proper focus navigation, the InputGroupAddon component should be placed after the input. Set the align prop to position the addon.

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`
`className`	`string`

<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

For <InputGroupInput />, use the inline-start or inline-end alignment. For <InputGroupTextarea />, use the block-start or block-end alignment.

The InputGroupAddon component can have multiple InputGroupButton components and icons.

<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

InputGroupButton

Displays buttons within input groups.

Prop	Type	Default
`size`	`"xs" \| "icon-xs" \| "sm" \| "icon-sm"`	`"xs"`
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"ghost"`
`className`	`string`

<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

Replacement for <Input /> when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

Prop	Type	Default
`className`	`string`

All other props are passed through to the underlying <Input /> component.

<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

Replacement for <Textarea /> when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

Prop	Type	Default
`className`	`string`

All other props are passed through to the underlying <Textarea /> component.

<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>