Input group.

A field with helpful context.

In practice

Compose Input with InputGroupAddon for prefixes, units or actions. Label the input itself; decorative addons may be aria-hidden.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { InputGroup, InputGroupAddon, Input, Label } from "@chlohal/coal-ui";
export default function Example() {
    const id = React.useId();
    return (<div>
          <Label htmlFor={id}>Website</Label>
          <InputGroup>
            <InputGroupAddon aria-hidden="true">https://</InputGroupAddon>
            <Input id={id} placeholder="your.studio"/>
            <InputGroupAddon aria-hidden="true">↗</InputGroupAddon>
          </InputGroup>
        </div>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
export function InputGroup({
  className,
  ...props
}: React.ComponentPropsWithRef<"div">) {
  return <div className={cn("coal-input-group", className)} {...props} />;
}
export function InputGroupAddon({
  className,
  ...props
}: React.ComponentPropsWithRef<"span">) {
  return <span className={cn("coal-input-addon", className)} {...props} />;
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.