Поле select ​

Поле используется для выбора единственного значений из предоставленного набора.

• Ключевое слово select.
• WhatWG Спецификация.

Параметры ​

options Обязательный ​

• Тип FormFieldOptions.

Набор возможных значений поля.

hiddenValues Необязательный ​

• Тип any[]

Если данный массив указан, то в выборке будут отсутствовать элементы указанные в hiddenValues.

placeholder Необязательный ​

• Тип string

В случае, если значение не выбрано - показывается текстовая метка.

Так же все параметры, общие для всех FormField. Информацию о них можно посмотреть на этой странице.

Значение ​

При нажатии или выборе соответствующего select элемента, значение будет установлено в соответствии со значением в поле value из переданных options.

Спецификация ​

• Объект доступен для доступа через Tab и Shift + Tab.
• Перемещение по объекту возможна используя ArrowDown и ArrowUp. Перемещение таким способом изменяет значение поля.
• Выбор элемента возможен по щелчку на соответствующий элемент.
• Нельзя выбрать элемент используя Enter или Space.
• Использование Enter или Space раскрывает или закрывает выпадающий список.
• Для длинного списка показывается дополнительный контроллер поиска.
• Блокировка полей отменяет навигацию используя Tab. Также происходит изменение стилистики select.
• При неудачной валидации поле должно изменить стилистику select.

Пример ​

Для подключения виджета необходимо указать type и options:

<form-field :options = "companies" type = "select"/>

<form-field :options = "companies" type = "select"/>

import {FormField} from "jenesius-vue-form";

const companies = {
	'a': "Apple",
	'h': "Huawei",
	's': "Samsung"
};
const colors = {
	white: 'Белый',
	black: 'Черный',
	red: 'Красный',
	yellow: 'Желтый',
	orange: 'Оранжевый',
	green: 'Зеленый',
	blue: 'Синий',
	purple: 'Фиолетовый',
	pink: 'Розовый',
	brown: 'Коричневый',
	grey: 'Серый',
};

import {FormField} from "jenesius-vue-form";

const companies = {
	'a': "Apple",
	'h': "Huawei",
	's': "Samsung"
};
const colors = {
	white: 'Белый',
	black: 'Черный',
	red: 'Красный',
	yellow: 'Желтый',
	orange: 'Оранжевый',
	green: 'Зеленый',
	blue: 'Синий',
	purple: 'Фиолетовый',
	pink: 'Розовый',
	brown: 'Коричневый',
	grey: 'Серый',
};

Поле по умолчанию:

В заблокированном состоянии:

Поле не прошло валидацию:

Поле с большим количеством options. Должен отображаться контроллер поиска:

Использование hiddenValues и установка значения ['blue', 'purple', 'pink', 'brown', 'grey']:

Текущее состояние формы:

{}

{}