Input field

A batteries-included field: label, input, hint and error.

import { BuiInputField } from 'ng-blatui';

<bui-input-field
  label="Email"
  type="email"
  hint="We'll never share it."
  [(value)]="email"
/>

With error

<bui-input-field
  label="Email"
  type="email"
  [(value)]="email"
  [error]="email() ? '' : 'Email is required'"
/>

Prop	Type	Default	Description
`label`	`string`	`''`	Visible label. When empty, pass `aria-label` for an accessible name.
`hint`	`string`	`''`	Helper text shown below the control while there is no error.
`error`	`string`	`''`	Error message; when set, the control is marked invalid and this replaces the hint.
`type`	`string`	`'text'`	Native input type (`text`, `email`, `password`, `number`, …).
`placeholder`	`string`	`''`	Placeholder shown when the field is empty.
`required`	`boolean`	`false`	Whether the field is required (adds a marker and the `required` attribute).
`size`	`"default" \| "lg" \| "sm"`	`'default'`	Size preset controlling input height, padding and text size.
`name`	`string`	`''`	Native `name` attribute.
`autocomplete`	`string`	`''`	Native `autocomplete` attribute.
`inputmode`	`string`	`''`	Native `inputmode` attribute.
`aria-label`	`string`	`''`	Accessible name applied to the input when there is no visible `label`.

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	The field value. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the field is disabled. Two-way bindable with `[(disabled)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.