# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## input-group Input with leading or trailing icons and text addons in one focus-ringed box. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add input-group` Also adds: input, utils, theme npm: class-variance-authority@^0.7.1 ```tsx import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupIcon, inputGroupVariants } from "@/components/ui/input-group"; ``` ### Example ```tsx import { AtSignIcon, GlobeIcon, LinkIcon, SearchIcon } from "lucide-react"; import { InputGroup, InputGroupAddon, InputGroupIcon, InputGroupInput } from "@/components/ui/input-group"; import { Kbd } from "@/components/ui/kbd"; export default function Demo() { return (

/ https:// .digitexa.app @acme.com USD

); } ``` ### Source: ui/input-group.tsx ```tsx import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; /* * An input with icons and text addons inside one bordered box. Children render in order, * so an icon or addon before the input leads and one after it trails. * * * https:// * * * */ const inputGroupVariants = cva( [ "flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md border border-input bg-surface px-(--dx-ig-px) text-fg shadow-sm [--dx-ig-px:--spacing(2.5)]", "transition-[border-color,box-shadow] duration-(--dx-motion-fast) ease-out", "hover:border-border-strong focus-within:border-accent focus-within:ring-3 focus-within:ring-accent/20 focus-within:hover:border-accent", "has-[[aria-invalid=true]]:border-danger has-[[aria-invalid=true]]:focus-within:ring-danger/20", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-muted has-[input:disabled]:text-fg-disabled", ], { variants: { size: { sm: "h-(--dx-control-sm) gap-1.5 text-xs [--dx-ig-px:--spacing(2)]", md: "h-(--dx-control-md) text-base", lg: "h-(--dx-control-lg) text-md [--dx-ig-px:--spacing(3)]", }, }, defaultVariants: { size: "md" }, }, ); type InputGroupProps = React.ComponentProps<"div"> & VariantProps; function InputGroup({ className, size, ...props }: InputGroupProps) { return

; } /** The kit's Input without its own box; font size follows the group. */ function InputGroupInput({ className, ...props }: React.ComponentProps) { return ( ); } type InputGroupAddonProps = React.ComponentProps<"span"> & { /** "segment" gives the addon its own tinted cell at the edge of the group. */ variant?: "inline" | "segment"; }; /** Text prefix or suffix such as "https://", "USD" or "@digitexa.com". */ function InputGroupAddon({ className, variant = "inline", ...props }: InputGroupAddonProps) { return ( ); } /** Decorative leading or trailing icon. */ function InputGroupIcon({ className, ...props }: React.ComponentProps<"span">) { return ( ); } export { InputGroup, InputGroupInput, InputGroupAddon, InputGroupIcon, inputGroupVariants, type InputGroupProps }; ```

Input group

Installation

Usage

Input group

Installation

Usage