@styloviz/input-field

Accessible text input with labels, hints, validation states and adornments.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/input-field

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvDatePickerComponent } from '@styloviz/input-field';

@Component({
  standalone: true,
  imports: [SvDatePickerComponent],
  template: `
    <sv-date-picker />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | value | string (two-way) | '' | Two-way bindable YYYY-MM-DD date string. | | label | string | '' | Label rendered above the trigger. | | placeholder | string | 'Select date' | Placeholder shown when no date is selected. | | minDate | string | '' | Minimum selectable date (YYYY-MM-DD). Cells before it are disabled. | | maxDate | string | '' | Maximum selectable date (YYYY-MM-DD). Cells after it are disabled. | | disabled | boolean | false | Disables the trigger and prevents the popover from opening. | | required | boolean | false | Shows a red asterisk in the label. | | ariaLabel | string | '' | Explicit accessible name for the trigger (falls back to label). |

Outputs

| Output | Type | Description | | --- | --- | --- | | opened | void | Emitted when the calendar popover opens. | | closed | void | Emitted when the calendar popover closes. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs

License

MIT