InputGroup

Use InputGroup

InputGroup is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, InputGroup, Field } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Field label="Website">
        {control => <InputGroup {...control} start="https://" placeholder="example.com" />}
      </Field>
    </FloodRoot>
  );
}

Design notes

• Ref, id, name, value, events and ARIA attributes target the real input. className/style customize the outer layout wrapper.
• start/end are logical content slots. Adornments do not become the submitted value or an accessible label; use Field or Label and explain prefixes when needed.
• The input has one shared field perimeter and accent focus. Interactive adornments keep their own focus indication and accessible names.
• disabled/readOnly affect the input; host-owned addon actions need their own disabled policy. Use compatible action sizes. Text-like input types are supported; Textarea/Select are separate constructs.

API reference