InputGroup

Combine a field with related actions or application-owned addons.

Category: Forms and selection
Import: @neural-ui/core/form-field
Selector: neu-input-group

import { NeuInputGroupComponent } from '@neural-ui/core/form-field';

Usage

Project the controls and actions in the required order. attached joins adjacent controls; false separates them and allows wrapping. size selects the group scale. Pass the same size to child components when they expose it. The group does not create a field label, validation or value binding.

Examples

Try the behavior and open Code for the implementation.

Order

Searches: 0 · —

Try and configure

Change the options and try the result. The generated template follows your configuration; Code contains the complete executable source.

Order

Searches: 0

Attached controls

<neu-input-group
  size="md"
  [attached]="true"
>
  <neu-input
    size="md"
    label="Order"
    [floatingLabel]="true"
    [value]="value()"
    (valueChange)="value.set($event)"
  />
  <button
    neu-button
    size="md"
    (neuClick)="searches.update(increment)"
  >
    Search
  </button>
</neu-input-group>

Data and content

InputGroup has only layout Inputs and default projection, with no Outputs. Values, actions and validation belong to the projected children and application.

Accessibility and keyboard

Every projected control needs its own visible or accessible label. Buttons retain their native tab order and activation. Decorative addons must not replace the field label. Keep error and hint relationships on the field component or an enclosing FormField.

Key	Action
`Tab`	Follow the normal focus order of links, fields and actions inside the content; the container adds no roving-focus model.
`Enter`	Activate a focused native button or follow a focused link inside the content.
`Space`	Activate a focused native button inside the content; fields keep normal text editing.

API

Inputs and Outputs match the pinned package. Named types link to their definitions; each supported Template has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`attached`	`boolean`	`true`	`[attached]`	Join adjacent controls; false adds gaps and wrapping.
`size`	`NeuFormFieldSize`	`'md'`	`[size]`	Group dimension scale: sm, md or lg.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Controls and addons View example	Content projection Project labelled controls, application-owned addons and related actions.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Controls and addons

*

Amount

Public Types

Open a type to inspect its definition and interface fields.

NeuFormFieldSizeTypeScript

Styles and tokens

Use public tokens for spacing, surface, text and focus. Check projected content and controls in both themes and at narrow widths.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
No data