Input group
import { Input, InputGroup } from "@combric/react";
export function Example() {
return <InputGroup><span aria-hidden="true">https://</span><Input aria-label="Project domain" defaultValue="combric.dev" /></InputGroup>;
}Input Group
Visual composition boundary for controls, adornments, and actions.
@combric/react · v1.1.1 · Current
Import and usage
import { InputGroup } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Examples
Control with action
import { Button, Input, InputGroup } from "@combric/react";
export function Example() {
return <InputGroup><Input aria-label="Project domain" defaultValue="combric.dev" /><Button type="button" variant="secondary">Check</Button></InputGroup>;
}Public API
| Name |
|---|
InputGroup |
| Property / capability | Published contract |
|---|---|
| Contract | Native div props |
| Contract | children |
Accessibility
Does not replace the control label; decorative adornments should be hidden from assistive technology.
CSS and customization
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.