Custom Input Cell Properties (:input-properties)

Any component that uses forms or input fields can receive an :input-properties object. This object allows you to customize the appearance and behavior of input fields in a unified way.

At the moment, the following properties are supported:

export interface InputByTypeProperties {
  variant?: 'outlined' | 'plain' | 'underlined' | 'filled' |
            'solo' | 'solo-inverted' | 'solo-filled';
  density?: 'default' | 'comfortable' | 'compact';
  rounded?: boolean | number;
  flat?: boolean;

  preferredCountries?: string[];
  onlyCountries?: string[];

  passwordMinLength?: number;
  passwordHasSpecSymbols?: boolean;
  passwordHasCamelcase?: boolean;
}

The properties variant, density, rounded, and flat are standard Vuetify input styling options that control the visual appearance of form fields.

preferredCountries — an array of country codes that should appear at the top of all country selection lists. For example: ['ru', 'by', 'ua', 'us']. If additional countries are available after the preferred ones, a visual separator is rendered.

onlyCountries — an array of country codes that are allowed for selection in the country picker dialog.

If onlyCountries is not specified, all countries are available, with preferredCountries shown first. If onlyCountries is specified, the selection list is built as follows:

• Countries from preferredCountries are displayed first
• Then countries from onlyCountries that were not already included

In most cases, specifying onlyCountries alone is sufficient. However, if you need to visually separate a few countries from the rest, you can additionally define preferredCountries.

password* — properties that define password validation rules:

• passwordMinLength — minimum password length
• passwordHasSpecSymbols — require special characters
• passwordHasCamelcase — require uppercase and lowercase characters