Inputs
<oge-text-box>, <oge-text-area>, <oge-number-box> and <oge-select-box> share one field chrome: four label modes (including floating), three styling modes, prefix/suffix slots, a clear button and a fixed-height subscript for hints and validation errors that never shifts your layout. All of them work standalone via [(value)], with Signal Forms via [formField] and with reactive forms via formControl. The drop-down editor has its own page.
The three editors
oge-text-box, oge-text-area and oge-number-box share one field chrome, so labels, hints, errors and adornments behave identically. All three bind three ways: standalone [(value)], Signal Forms via [formField], or classic reactive forms via formControl. The number editor treats empty as null — never 0.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeNumberBox, OgeTextArea, OgeTextBox } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeNumberBox, OgeTextArea, OgeTextBox],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<oge-text-box label="Name" [(value)]="name" placeholder="Jane Doe" />
<oge-text-box label="E-mail" mode="email" hint="We never share it" [showClearButton]="true" />
<oge-number-box label="Amount" [(value)]="amount" [min]="0" [showSpinButtons]="true" />
<oge-text-area label="Notes" [(value)]="notes" [autoResize]="true" [maxRows]="6" />
`,
})
export class Demo {
protected readonly name = signal('');
protected readonly amount = signal<number | null>(null);
protected readonly notes = signal('');
}Styling modes & sizes
outlined (default), filled and underlined cover the common form aesthetics; all derive from the design tokens and adapt to every theme. Sizes sm/md/lg (28/34/42px) match the button scale exactly, so mixed button-and-field rows align without manual tweaks.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTextBox } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeTextBox],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<oge-text-box label="Outlined" stylingMode="outlined" />
<oge-text-box label="Filled" stylingMode="filled" />
<oge-text-box label="Underlined" stylingMode="underlined" />
<!-- sizes match the button scale: 28 / 34 / 42px -->
<oge-text-box label="Small" size="sm" />
<oge-text-box label="Large" size="lg" />
`,
})
export class Demo {}Label modes
Four placements: static renders a compact caption above the field, outside a conventional block label, floating starts in the placeholder position and lifts on focus or content, and hidden keeps the field visually clean while exposing the label to screen readers via aria-label. Avoid mixing modes within one row — floating fields are taller.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTextBox } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeTextBox],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<oge-text-box label="Static (default)" labelMode="static" />
<oge-text-box label="Floating" labelMode="floating" />
<oge-text-box label="Outside" labelMode="outside" />
<oge-text-box label="Hidden (aria-label)" labelMode="hidden" placeholder="Search…" />
`,
})
export class Demo {}Prefix & suffix slots
Project any content — symbols, icons, units — into the leading or trailing slot with the ogeInputPrefix / ogeInputSuffix attributes. Custom suffixes render at the end of the built-in rail, after the clear, reveal and copy buttons, so the ordering stays predictable.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeInputPrefix, OgeTextBox } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeInputPrefix, OgeTextBox],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<oge-text-box label="Price">
<span ogeInputPrefix>€</span>
</oge-text-box>
<oge-text-box label="Website" placeholder="example.com">
<span ogeInputPrefix>https://</span>
</oge-text-box>
`,
})
export class Demo {}Notes
- The subscript region defaults to
subscriptSizing="fixed"— appearing errors never push the layout. Use'none'for compact/grid-cell usage. fluidstretches to 100% width; the default width comes from--oge-input-width(240px).- Number values are
number | null— empty isnull, never0.