Поле checkbox ​

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

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

Параметры ​

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

• Тип FormFieldOptions.

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

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

Значение ​

В качестве значения выступает массив, содержащий value выбранных элементов, т.к. поле предназначено для множественного выбора.

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

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

Примеры ​

Для подключения виджета воспользуйтесь стандартной компонентой FormField, а также необходимо указать атрибуты type и name:

<template>
	<form-field
		name = "color"
		type = "checkbox"
		label = "Color"
		:options = "options"
	/>
</template>
<script setup>
import {FormField} from "jenesius-vue-form";

const options = {
	r: "Красный",
	g: "Зелёный",
	y: "Жёлтый"
}

</script>

<template>
	<form-field
		name = "color"
		type = "checkbox"
		label = "Color"
		:options = "options"
	/>
</template>
<script setup>
import {FormField} from "jenesius-vue-form";

const options = {
	r: "Красный",
	g: "Зелёный",
	y: "Жёлтый"
}

</script>

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

{}

{}

Поле в обычно состоянии:

Вид поля при его блокировки:

Вид поля в случае ошибки валидации: