Input component
The component <day-input> is a form control that provides the same functionality as a native <input>, enhanced with DAY Design styling.
Dependencies
'/core'
'/icon'
Example
Description
A reusable input component that implements ControlValueAccessor to integrate with Angular reactive forms. It supports different types (text, number, email, etc.), input sizes, optional left/right slot content via content projection, and dynamic styling based on control state (e.g., disabled, filled, with slot). Class bindings and signal-based state make it reactive and easily extendable.
Import
import { DAYInputComponent } from '@dayerlin-bustamante/input';
Selectors
Input: day-input
Installation and Usage
npm install @dayerlin-bustamante/inputimport { DAYInputComponent } from '@dayerlin-bustamante/input';<day-input label="Label"/>Inputs
| Name | Description | Default |
|---|---|---|
| id: string | null | Value assigned to the input `id` and used for the associated label's `for` attribute. | null |
| type: "text" | "number" | "email" | "tel" | "password" | "url" | "hidden" | Defines the type of input to render. | "text" |
| size: "big" | "medium" | Determines the visual size of the input field. | "medium" |
| placeholder: string | Text shown inside the input when it is empty. | undefined |
| maxlength: number | null | Specifies the maximum number of characters allowed in the input. | null |
| autofocus: boolean | If true, the input will automatically gain focus on load. | false |
| autocomplete: "on" | "off" | Indicates whether the input should have autocomplete enabled. | "off" |
Output
Not included.
Computes and internal events
| Name | Description | Default |
|---|---|---|
| onChange() | Method called on click. Changes the value if it is not disabled. |
Directives
Not included.
Public methods
Not included.