Free
Pro

Input Group

Base UI (Angular) input-group wraps a label, native input or textarea with base-input, errors, and helper text. Add the CLI item once; then bind ngModel or formField. Composite widgets (combobox, tags) sit beside it — they are separate CVA controls, not native fields.

When to use

  • Text, email, and textarea fields that need a label and validation message.
  • Signal forms — put formField on the native input inside the group.

When not to use

  • Searchable selects — use combobox, not a fake input-group select.
  • File lists — use file-upload (Pro), whose value is File[].

Install with npx base-ui-cli add input-group.

free

Default Input Group

Use base-input and base-textarea directives on <input/> and <textarea></textarea> elements wrapped inside <base-input-group> component. Check example below.




HTML

Disabled and Readonly Input Group

Check examples below if you want to use disabled or readonly state of input. The example works with reactive forms as well.

Disabled
Readonly

HTML

Validation

For validation message use <base-error>. By default, <base-error> messages are shown when the control is invalid and the user has interacted with (touched) the element or the parent form has been submitted. Check examples below.


HTML

Helper text

Just add <base-info-text> and it utomatically will appear under the input. Check examples below.

We'll never share your email. Check our Privacy Policy

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add input-group

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add input-group
// Paths are relative to aliases.components (default: src/app/components)
import { BaseAddonEndDirective } from './input-group/base-addon-end.directive';
import { BaseAddonStartDirective } from './input-group/base-addon-start.directive';
import { BaseInputDirective } from './input-group/base-input.directive';
import { BaseTextareaDirective } from './input-group/base-textarea.directive';
import { ErrorComponent } from './input-group/error/error.component';
import { InfoTextComponent } from './input-group/info-text/info-text.component';
import { InputGroupComponent } from './input-group/input-group.component';
import { LabelComponent } from './input-group/label/label.component';

@Component({
  selector: 'app-your-component',
  imports: [
    BaseAddonEndDirective,
    BaseAddonStartDirective,
    BaseInputDirective,
    BaseTextareaDirective,
    ErrorComponent,
    InfoTextComponent,
    InputGroupComponent,
    LabelComponent
  ],
  template: `...`
})
export class YourComponent {}

API for input-group — generated from JSDoc in the library source.

API reference for input-group
APIMemberTypeDefaultDescription
base-error—— — An error message element for use inside a `base-input-group`.
base-errorclassstring''Additional host CSS classes (merged via cn()).
base-info-text—— — A helper/info text element for use inside a `base-input-group`.
base-info-textclassstring''Additional host CSS classes (merged via cn()).
base-input-group—— — A structural container wrapping form controls.
base-input-groupclassstring''Additional host CSS classes (merged via cn()).
base-labelclassstring''Additional host CSS classes (merged via cn()).
base-labelforstring''Explicit `for` attribute; `base-input-group` auto-fills it via .
[base-addon-end]—— — An element positioned at the end of an input group.
[base-addon-start]—— — An element positioned at the start of an input group.
[base-input]—— — A standard input directive that applies consistent Lussos theme styling to native text inputs. Supports disabled and readonly states out of the box.
[base-textarea]—— — A standard textarea directive that applies consistent Lussos theme styling.