Input
Native input styled with the blocInput directive.
Keyboard: native browser. ARIA: aria-invalid set automatically on error state.
$ npm install @bloc-ui/core
Basic types
Text
Basic text field.
Password
Masked input for secrets.
No label
Standalone input, no label needed.
Disabled
Non-interactive state.
Prefix / Suffix
Prefix icon
Search field with a leading icon.
Suffix icon
Input with a trailing action icon.
Prefix & suffix
Both adornments combined.
Attribute selector
Same group using attribute directives on divs.
Validation
Error — manual
Explicit [error]="true" flag.
Error — FormControl
Driven by invalid && touched. Click the field then blur.
Template-driven (ngModel)
Two-way binding
Bound via [(ngModel)].
value: (empty)
Reactive forms
FormControl
Required field — shows error when touched and blank.
touched: false | valid: false
formControlName
Inside a FormGroup via formControlName.
group value: (empty)
Theming
Custom token
Override via CSS custom properties — radius and focus ring.