Componenta11yUpdated in v15

Input

A directive that styles a native <input> or <textarea>.

Installation

Import the class, and @use the entry point in your global styles: without it the component renders unstyled.

import { Component } from '@angular/core';
import { WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix, WrPasswordToggle } from 'ngwr/input';

@Component({ imports: [WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix, WrPasswordToggle] })
export class MyComponent {}

Basic usage

Value: Hello world
<input wrInput placeholder="Type here…" [(ngModel)]="text" />

Types

Set any native type.

<input wrInput type="email" placeholder="[email protected]" />
<input wrInput type="number" placeholder="0" />
<input wrInput type="search" placeholder="Search" />

Prefix & suffix

Wrap the input in <wr-input-group> and mark its siblings with wrInputPrefix or wrInputSuffix.

$USDhttps://
<wr-input-group>
  <span wrInputPrefix>$</span>
  <input wrInput type="number" [(ngModel)]="amount" />
  <span wrInputSuffix>USD</span>
</wr-input-group>

Rounded

<input wrInput rounded placeholder="Rounded" />

Password reveal

<wr-password-toggle [for]> switches its input between password and text.

<wr-input-group>
  <input wrInput type="password" [(ngModel)]="password" #pwInput />
  <wr-password-toggle [for]="pwInput" />
</wr-input-group>

Input masking — with ngx-mask

ngwr ships no mask. Put ngx-mask on the same <input>.

pnpm add ngx-mask
import { provideEnvironmentNgxMask } from 'ngx-mask';

bootstrapApplication(AppComponent, {
  providers: [provideEnvironmentNgxMask({ thousandSeparator: ',', decimalMarker: '.' })],
});

// In a component:
import { NgxMaskDirective } from 'ngx-mask';

@Component({
  imports: [NgxMaskDirective, WrInput, FormsModule],
})
export class MyForm {}
<!-- Phone (US-style) -->
<input wrInput mask="(000) 000-0000" placeholder="(555) 555-5555" [(ngModel)]="phone" />

<!-- Credit card -->
<input wrInput mask="0000 0000 0000 0000" placeholder="4242 4242 4242 4242" [(ngModel)]="card" />

<!-- Expiry MM/YY -->
<input wrInput mask="00/00" placeholder="12/29" [(ngModel)]="expiry" />

<!-- CVC (3 digits) -->
<input wrInput mask="000" placeholder="123" [(ngModel)]="cvc" />

<!-- Date DD/MM/YYYY -->
<input wrInput mask="00/00/0000" placeholder="31/12/2026" [(ngModel)]="date" />

<!-- Money: separator with two-decimal precision -->
<wr-input-group>
  <span wrInputPrefix>$</span>
  <input wrInput mask="separator.2" [(ngModel)]="money" placeholder="1,234.56" />
</wr-input-group>

Mask tokens: ngx-mask docs.

Disabled

<input wrInput placeholder="Disabled" disabled />

In a form

Binds like any native input, so updateOn and { emitEvent: false } work. See Forms.

[wrInput] directive

NameDescriptionTypeDefault
wrInputStyles a native <input> or <textarea>.attribute—
sizeControl size.'sm' | 'md' | 'lg''md'
roundedPill-shaped corners.booleanfalse

<wr-input-group>

NameDescriptionTypeDefault
wr-input-groupWraps the input with its affixes or toggle.component—
roundedPill-shaped corners.booleanfalse

Prefix & suffix directives

NameDescriptionTypeDefault
[wrInputPrefix]The affix before the input: left in LTR, right in RTL.attribute—
[wrInputSuffix]The affix after the input: right in LTR, left in RTL.attribute—

<wr-password-toggle>

NameDescriptionTypeDefault
forrequiredThe linked password <input> reference.HTMLInputElement—
showLabelAccessible name while the password is hidden. Defaults to the input.showPassword catalog key.string | nullnull
hideLabelAccessible name while the password is shown. Defaults to the input.hidePassword catalog key.string | nullnull

CSS variables

Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/input's own element.

VariableDefaultDeclared on
--wr-input-bgvar(--wr-color-surface).wr-input +1 variant override
--wr-input-bordervar(--wr-border-base).wr-input +2 variant overrides
--wr-input-colorvar(--wr-color-on-surface).wr-input +1 variant override
--wr-input-font-familyvar(--wr-font-family-base).wr-input
--wr-input-font-sizevar(--wr-control-font-size-md).wr-input +2 variant overrides
--wr-input-group-affixvar(--wr-color-on-surface-muted).wr-input-group
--wr-input-group-affix-gapvar(--wr-space-xs).wr-input-group
--wr-input-group-bgvar(--wr-color-surface).wr-input-group +1 variant override
--wr-input-group-bordervar(--wr-border-base).wr-input-group +1 variant override
--wr-input-group-font-familyvar(--wr-font-family-base).wr-input-group
--wr-input-group-font-sizevar(--wr-text-sm).wr-input-group
--wr-input-group-font-weightvar(--wr-font-weight-medium).wr-input-group
--wr-input-group-line-heightvar(--wr-control-line-height-md).wr-input-group
--wr-input-group-padding-xvar(--wr-control-padding-x-md).wr-input-group +1 variant override
--wr-input-group-radiusvar(--wr-control-radius-md).wr-input-group +1 variant override
--wr-input-group-ringtransparent.wr-input-group +1 variant override
--wr-input-line-heightvar(--wr-control-line-height-md).wr-input +2 variant overrides
--wr-input-padding-xvar(--wr-control-padding-x-md).wr-input +3 variant overrides
--wr-input-padding-yvar(--wr-control-padding-y-md).wr-input +2 variant overrides
--wr-input-placeholdervar(--wr-color-placeholder).wr-input
--wr-input-radiusvar(--wr-control-radius-md).wr-input +3 variant overrides
--wr-input-ringtransparent.wr-input +2 variant overrides

Dependencies

Built onForm
Used byDate Picker, Editor, Number Input, Schema Form, Transfer

See also

2022 – 2026 © Roman Khegayv15.1.0