Docs / Components
SenseInputGroupComponent
Fused horizontal control group from @artificialsenselabs/ui with optional left and right addons. Pairs with sense-input or native input elements.
Live demo: run nx serve showcase and open /components/input-group (port 4202).
Overview
Category: Form / layout. Selector: sense-input-group. Import: import { SenseInputGroupComponent } from '@artificialsenselabs/ui';
<sense-input-group>
<span addonLeft aria-hidden="true">https://</span>
<sense-input ariaLabel="Website URL" placeholder="example" />
<span addonRight aria-hidden="true">.com</span>
</sense-input-group>Projection slots
| Marker | Position | Typical content |
|---|---|---|
addonLeft | Leading | Currency symbol, URL scheme, unit prefix |
| (default) | Center | sense-input or native input |
addonRight | Trailing | Domain suffix, unit postfix, action button |
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
styleClass | string | null | null | Extra class names merged onto the host element. |
Accessibility
- The center control must have a visible
labelorariaLabel. - Mark decorative prefix/suffix addons with
aria-hidden="true". - Interactive addons (buttons) need their own accessible names.