Input

A single-line text field with label, hint, sizes and error state.

bk-inputForms and inputsAngular

Preview

A working preview of Input in the Brickclay style. Try it.

SearchThis is a hint text to help user.PasswordPhone🇺🇸 +1EmailEnter a valid email address

Interact with the preview to see events here.

Interactive playground

Event log

Type, focus, blur, click the icon, or clear the field to see emitted events.

Markup

<bk-input
  [id]="'playground-input'"
  [name]="'playground-input'"
  [type]="'search'"
  label="Search"
  placeholder="Search here..."
  [iconSrc]="'assets/icons/search-input.svg'"
  [iconOrientation]="'left'"
  [clearable]="true"
  [(ngModel)]="value">
</bk-input>

Examples

Custom country list

Pass [countryOptions] to map your own countries into the phone selector. When omitted, the built-in default list is shown. You can also spread DEFAULT_COUNTRY_OPTIONS to extend the defaults instead of replacing them.

Dropdown shows GB, PK, AE, IN, your own mapped list.

Built-in defaults plus GB and PK appended.

No [countryOptions] passed, shows the built-in default list.

Trim whitespace

With [trim]="true" the emitted / form-control value has leading and trailing whitespace removed as you type, while spaces inside the value are kept. The visible text is tidied on blur (so you can still type a space between two words), and values assigned programmatically are trimmed too. Try typing " John Doe " in both fields, then click away.

trim off (default)

trim on (reactive, required)

Works with reactive and template-driven forms

clearable, like every other input/output, runs through the same ControlValueAccessor (writeValue / registerOnChange) whether the field is bound via [(ngModel)] or a reactive FormControl; there's no separate code path for either. Clear either field below to see its own form state update.

Template-driven ([(ngModel)])

Reactive (formControlName)

API reference

Inputs <`bk-input`>

Name	Type	Default	Possible values	Description
`ngModel`	`string`	`''`	any text	Bound via ControlValueAccessor, works with `ngModel` or `formControlName`.
`id / name`	`string`	–	any string	Native id/name attributes. Required for the label's for to work.
`type`	`BkInputType`	`'text'`	`'text' \| 'email' \| 'password' \| 'number' \| 'url' \| 'tel' \| 'search'`	Native input type. password and url also switch on the toggle icon / https prefix below; search is required for clearable to render.
`size`	`BkInputSize`	`'default'`	`'default' \| 'sm'`	Compact height/padding/font, for tight contexts like a dropdown search box.
`label`	`string`	`''`	any text	Label above the field. Omit to render without one.
`placeholder`	`string`	`''`	any text	Native placeholder. Overridden by the phone country's own placeholder when phone is on.
`hint`	`string`	`''`	any text	Helper text under the field. Hidden while hasError is true.
`required`	`boolean`	`false`	`true \| false`	Shows a required marker (*) next to the label.
`disabled`	`boolean`	`false`	`true \| false`	Disables the field. Also settable via setDisabledState from a reactive form.
`readOnly`	`boolean`	`false`	`true \| false`	Native read-only, value can't be edited but is still selectable/submittable.
`hasError`	`boolean`	`false`	`true \| false`	Switches the field to its error styling and shows errorMessage instead of hint.
`errorMessage`	`string`	`''`	any text	Text shown under the field when hasError is true.
`showErrorIcon`	`boolean`	`false`	`true \| false`	Shows an info icon on the right when hasError is true.
`iconSrc`	`string`	–	any icon path	Icon inside the field. Position controlled by iconOrientation; clicking it emits clicked.
`iconOrientation`	`IconOrientation`	`'left'`	`'left' \| 'right'`	Side iconSrc renders on.
`showIcon`	`boolean`	`true`	`true \| false`	Toggles iconSrc visibility without removing the input.
`clearable`	`boolean`	`false`	`true \| false`	Shows a clear ("x") button once the field has a value, only applies when type="search". Renders on the side opposite iconSrc (or on the right when there's no icon), so it works with either iconOrientation. Ignored while phone, currency, or password is on, those already use both sides of the field.
`trim`	`boolean`	`false`	`true \| false`	Removes leading/trailing whitespace from the emitted/form value as the user types (internal spaces are kept). The visible text is trimmed on blur/change; programmatic values (writeValue, `ngModel`, FormControl.setValue) are trimmed too, so validators see the trimmed text.
`mask`	`string \| null`	`null`	`ngx-mask pattern, e.g. '0000 0000 0000 0000'`	Applies an input mask (card numbers, CNIC, phone, etc). Ignored while phone is on, that uses the selected country's mask.
`dropSpecialCharacters`	`boolean \| string[] \| false \| true`	`false`	array of characters	Strips mask literals (spaces, dashes, ...) from the model value, keeping only the digits/letters typed.
`password`	`boolean`	`false`	`true \| false`	Adds a show/hide eye toggle and forces type to password/text accordingly.
`showPassword`	`boolean`	`false`	`true \| false`	Initial reveal state for a password field.
`phone`	`boolean`	`false`	`true \| false`	Adds a country selector with per-country mask/prefix/placeholder, driven by countryCode and countryOptions.
`countryCode`	`string`	`'US'`	a code from countryOptions	Selected country when phone is on.
`countryOptions`	`CountryOption[]`	US, MT, PL, CH, TR, UG, ZM	array of { code, name, mask, prefix, placeholder }	Countries listed in the phone dropdown. Provide your own list to replace the defaults; when omitted (or empty) the built-in DEFAULT_COUNTRY_OPTIONS are used. Spread DEFAULT_COUNTRY_OPTIONS to extend rather than replace.
`currency`	`boolean`	`false`	`true \| false`	Formats the value as currency while typing (e.g. 1,000,000.00) and shows a bordered dollar icon on the left, like the url prefix. Model value is a plain number (or null when empty); the display stays formatted. Ignored while mask or phone is set.
`currencyDecimals`	`number`	`2`	any non-negative integer	Number of decimal `(cents)` places shown/enforced when currency is on.
`allowNegative`	`boolean`	`false`	`true \| false`	Allows a leading - for negative amounts when currency is on.
`pattern`	`string \| null`	–	any regex source	Native pattern attribute for browser/form validation.
`min / max / step`	`number \| null`	`null`	any number	Native numeric constraints, used with type="number".
`minlength / maxlength`	`number \| null`	`null`	any number	Native text length constraints.
`autoComplete`	`BkInputAutoComplete`	`'off'`	any native autocomplete token	Native autocomplete attribute.
`autoCapitalize`	`BkInputAutoComplete`	`null`	`null \| 'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'`	Native autocapitalize attribute (mobile keyboards).
`inputMode`	`BkInputMode`	`null`	`null \| 'text' \| 'numeric' \| 'decimal' \| 'tel' \| 'search'`	... \| Native inputmode attribute, picks the right mobile keyboard.
`tabIndex`	`number \| null`	`null`	any number	Native tabindex attribute.

Outputs <`bk-input`>

Name	Payload	Fires when
`input`	`Event`	Raw native input event, on every keystroke. Use `ngModel`Change for the parsed value.
`change`	`Event`	Raw native change event, on commit (blur or Enter).
`focus`	`Event`	The field gains focus.
`blur`	`Event`	The field loses focus.
`clicked`	`boolean`	The iconSrc icon is clicked (no-op while disabled/readOnly).
`cleared`	`void`	The clear ("x") button is clicked. The model is already reset to '' by then, `ngModel`/ngModelChange picks that up on its own; this is for side effects (e.g. re-running a search).