ns-input

Overview

The ns-input component renders text-like fields such as text, password, email, number, and telephone inputs. It binds directly to field.value with v-model.

Most form input components expect a field object. Common keys include name, label, value, type, placeholder, description, errors, disabled, options, prefix, suffix, data, and component depending on the component being rendered.

Props

• field: required field definition.
• type: overrides field.type; defaults to text.
• leading: displays a leading label inside the input.
• placeholder: legacy prop; the component primarily reads field.placeholder.

Field keys

• field.name controls the input id.
• field.label controls the label when provided through the default slot.
• field.value stores the input value.
• field.placeholder sets placeholder text.
• field.disabled disables the control.
• field.prefix and field.suffix render fixed text inside the input.
• field.errors marks the component as invalid and is displayed by ns-field-description.

const field = {
    name: 'email',
    label: 'Email',
    type: 'email',
    value: '',
    placeholder: '[email protected]',
    errors: []
};

<ns-input :field="field">Email</ns-input>