Toolbar
Beta

Input

Native input directive for Frakton fields. Use input[fktInputText] inside fkt-field when the user needs a single-line text control that keeps native attributes, forms, i18n, masks, and third-party directives on the actual input element.

Import

import {FktInputTextDirective} from "frakton-ng/input";

Composition

Input text composition patterns. The input directive owns the native single-line control state, while fkt-field owns label, outline, hint, error, density, prefix/suffix, and supporting text.

Basic

Basic usage with input[fktInputText] projected into fkt-field. Use this for normal text entry where the consumer still needs direct access to native input attributes and directives.


    
    



    

    
        Used in public URLs.

Native attributes

Native attributes stay on the real input element. Use type, autocomplete, inputmode, spellcheck, readonly, disabled, masking directives, and browser-specific attributes directly on input[fktInputText].

Character count

Character count is provided by fktCharacterCount. The directive reads the max length from the normalized field state, so Signal Forms, Reactive Forms, and native maxlength can share the same field supporting UI.

Forms

Form integration examples. The input directive participates in the same FktFieldControl contract as textarea, so the field can react to value, focused, disabled, touched, invalid, required, errors, and max length without manual state forwarding.

Signal forms

Signal Forms integration through Angular's [formField] directive. Validation state, disabled state, required marker, and max length are read from the projected control.

Reactive forms

Reactive Forms integration through formControlName. The field reacts to programmatic updates, reset, disabled state, and validation changes from the Angular control.

Input

Import

import { FktFieldComponent } from 'frakton-ng/field';
import { FktInputTextDirective } from 'frakton-ng/input-text';

Usage Model

fktInputText is a directive for the native <input> element. It is designed to be projected inside fkt-field, keeping the native control open for browser attributes, forms, i18n, masking libraries, and third-party directives while the field owns the visual shell.

<fkt-field label="Full name">
    <input
        fktInputText
        placeholder="Enter a full name"
    >
</fkt-field>

Native Input First

The directive does not replace the native input API. Keep attributes such as type, autocomplete, inputmode, spellcheck, readonly, disabled, and masking directives on the input itself.

<fkt-field label="CPF">
    <input
        fktInputText
        ngxMask="000.000.000-00"
        formControlName="cpf"
    >
</fkt-field>

Field Integration

The input implements the same field-control contract as fktTextarea. The field can read value, focus, disabled, touched, invalid, required, error, and max-length state from the projected input without the consumer forwarding those flags manually.

Character Count

Use fktCharacterCount from frakton-ng/field when the field should render a max-length counter in the hint end area. The max length is inferred from Signal Forms, Reactive Forms, or the native maxlength attribute when available.

<fkt-field label="Display name">
    <input
        fktInputText
        fktCharacterCount
        [formField]="form.displayName"
    >
</fkt-field>

API