A component that joins an input with buttons and addons into one control. This is a custom component with no Base UI primitive. It joins an Input with Button elements and InputGroup.Addon labels into one control.
Here is the component implementation code that you can copy to your project:
// https://devie-ui.com/components/input-group
import clsx from "clsx";
import type { ComponentProps } from "react";
import styles from "./InputGroup.module.scss";
function Root({ className, ...props }: InputGroup.Root.Props) {
return <div className={clsx(styles.root, className)} {...props} />;
}
function Addon({ className, ...props }: InputGroup.Addon.Props) {
return <span className={clsx(styles.addon, className)} {...props} />;
}
const InputGroup = {
Root,
Addon,
};
namespace InputGroup {
export namespace Root {
export interface Props extends ComponentProps<"div"> {
className?: string;
}
}
export namespace Addon {
export interface Props extends ComponentProps<"span"> {
className?: string;
}
}
}
export default InputGroup;Place an Input and a Button inside InputGroup.Root. The input fills the remaining width.
secondary or icon-secondary button variant. The primary ring does not align with the input border.Use InputGroup.Addon for a static prefix or suffix such as a protocol or a unit.
Put InputGroup.Root inside Field.Root. The label and the validation attach to the Input as usual.
Keep this key secret.