InputGroup

InputGroup provides a reusable, token-driven control for product interfaces. Available in the React renderer; no page-specific styling is required.

#Default usage

<VStack align="stretch" gap={12} fullWidth>
  <InputGroup startAddon="https://">
    <Input aria-label="Website domain" defaultValue="design.frogg.id" />
  </InputGroup>
  <InputGroup endAddon="USD">
    <Input aria-label="Amount in US dollars" inputMode="decimal" placeholder="0.00" />
  </InputGroup>
</VStack>

#Import

import { InputGroup, Input, VStack } from "@froggdesign/enter-ui-react";

#Patterns

Try the interactive InputGroup preview on the New components page.

#Accessibility

Provide a visible label with htmlFor pointing to the nested input, or give the input an accessible name. An addon does not replace an input label. Label icon-only addon actions separately. Input disabled, read-only, and invalid states remain input-owned; disable an addon action separately when needed. Tab moves between the input and interactive addons.

#API

• startAddon, endAddon: React nodes before or after the input, including accessible buttons.
• children: a direct EnterUI Input; the group owns its shared control surface.
• Extends div props and forwards its ref to the wrapper.

#Styling

The group's outer input surface uses the shared medium (8px) control radius; the nested Input does not draw a second border.

The component owns its token-based styles in the shared EnterUI stylesheet. Import @froggdesign/enter-ui-react/styles.css once at the application root. Theme boundaries supply light and dark colors; use public props and composition in consuming pages.