Forms

Input group.

Icons, prefixes and supporting actions, within one field.

LIVE PREVIEWTry it. It works.

Search library

A labelled search field with a clear action.

Budget

$AUD

Text prefixes share the field boundary.

Account reference

Check the reference before continuing.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/input-group.json

Registry setup · Open the playground

Usage

<Field label="Search library">
  <InputGroup leading={<Icon name="search" />}>
    <Input type="search" placeholder="Find a component…" />
  </InputGroup>
</Field>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

leading and trailing accept icons, text or accessible actions. Input remains the labelled native field and inherits Field hints, errors and required state. The group supplies a shared boundary and keyboard focus indicator. A trailing IconButton still needs its own label.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.