Skip to content
aq-ui
Back to ComponentsComponent

Input Group

Open-code aq-ui accessible component family for Input Group.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add input-group

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { InputGroup } from "@/components/ui/input-group"

<InputGroup />

InputGroup

constSource L11

Open-code aq-ui accessible component family for Input Group.

const InputGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div">>(…)
Props type
React.ComponentProps<"div">
<InputGroup />

InputGroupAddon

constSource L51

Public const export from Input Group.

const InputGroupAddon = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>>(…)
Props type
React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>
<InputGroupAddon />

InputGroupButton

constSource L95

Public const export from Input Group.

const InputGroupButton = React.forwardRef<React.ComponentRef<typeof Button>, Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & { type?: "button" | "submit" | "reset" }>(…)
Props type
Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & { type?: "button" | "submit" | "reset" }

Props

NameTypeDefault
type?"button" | "submit" | "reset""button"
<InputGroupButton />

InputGroupInput

constSource L135

Public const export from Input Group.

const InputGroupInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentProps<"input">>(…)
Props type
React.ComponentProps<"input">
<InputGroupInput />

InputGroupText

constSource L118

Public const export from Input Group.

const InputGroupText = React.forwardRef<React.ComponentRef<"span">, React.ComponentProps<"span">>(…)
Props type
React.ComponentProps<"span">
<InputGroupText />

InputGroupTextarea

constSource L153

Public const export from Input Group.

const InputGroupTextarea = React.forwardRef<React.ComponentRef<typeof Textarea>, React.ComponentProps<"textarea">>(…)
Props type
React.ComponentProps<"textarea">
<InputGroupTextarea />

Registry dependencies

button, input, textarea, utils

Package dependencies

class-variance-authority@^0.7.1

Files

  • components/ui/input-group.tsx

Source