Радио ввод формы

Для согласованности между браузерами, <b-form-radio-group> и <b-form-radio> используют пользовательский радио-ввод Bootstrap, чтобы заменить радио-ввод браузера по умолчанию. Он построен на основе семантической и доступной разметки, поэтому является надежной заменой радио-ввода по умолчанию.

Индивидуальные радио

<template>
  <div>
    <b-form-group label="Индивидуальные радио" v-slot="{ ariaDescribedby }">
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" :aria-describedby="ariaDescribedby" name="some-radios" value="B">Option B</b-form-radio>
    </b-form-group>

    <div class="mt-3">Selected: <strong></strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ''
      }
    }
  }
</script>

<!-- b-form-radio.vue -->

Сгруппированные радио

Отдельные радио-вводы в <b-form-radio-group> могут быть указаны с помощью свойства options или путем ручного размещения подкомпонента <b-form-radio>. При использовании вручную размещенных компонентов <b-form-radio> внутри <b-form-radio-group>, они унаследуют большинство свойств и v-model от <b-form-radio-group>.

<template>
  <div>
    <b-form-group label="Radios using options" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Radios using sub-components" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="radio-sub-component"
      >
        <b-form-radio value="first">Toggle this custom radio</b-form-radio>
        <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
        <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong></strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'Toggle this custom radio', value: 'first' },
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'This one is Disabled', value: 'third', disabled: true },
          { text: 'This is the 4th radio', value: { fourth: 4 } }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group.vue -->

Не стесняйтесь комбинировать и сопоставлять свойство options и <b-form-radio> в <b-form-radio-group>. Помещенные вручную вводы <b-form-radio> будут появляться под любыми радио-вводами, сгенерированными свойством options. Чтобы они отображались выше входов, созданных с помощью options, поместите их в именованный слот first.

<template>
  <div>
    <b-form-group label="Radios using options and slots" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="radio-slots"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-options-slots"
      >
        <!-- Radios in this slot will appear first -->
        <template #first>
          <b-form-radio value="first">Toggle this custom radio from slot first</b-form-radio>
        </template>

        <!-- Radios in the default slot will appear after any option generated radios -->
        <b-form-radio :value="{ fourth: 4 }">This is the 4th radio</b-form-radio>
        <b-form-radio value="fifth">This is the 5th radio</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong></strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        options: [
          { text: 'Or toggle this other custom radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-slot.vue -->

Массив опций радиогруппы

options могут быть массивом строк или объектов. Доступные поля:

value Выбранное значение, которое будет установлено на v-model
disabled Отключает элемент для выбора
text Отображает текст или html Отображает базовый встроенный HTML-код

value может быть строкой, числом или простым объектом. Избегайте использования сложных типов в значениях.

Если указаны и html и text, html приоритет будет иметь. В поле html поддерживается только базовый/собственный HTML (компоненты работать не будут). Обратите внимание, что не все браузеры будут отображать встроенный html (т. е. <i>, <strong> и т. д.) внутри элементов <option> в <select>.

Будьте осторожны при размещении пользовательского контента в поле html, поскольку это может сделать вас уязвимыми для XSS атак, если вы сначала не обезопасить введенную пользователем строку.

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

Если запись массива является строкой, она будет использоваться как для сгенерированных полей value и text.

Вы можете смешивать, используя строки и объекты в массиве.

Внутри BootstrapVue преобразует указанный выше массив в следующий формат (формат массив объектов):

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

Параметры как массив объектов

const options = [
  { text: 'Item 1', value: 'first' },
  { text: 'Item 2', value: 'second' },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4' },
  { text: 'Item 5', value: { foo: 'bar', baz: true } }
]

Если value отсутствует, то text будет использоваться как полей value и text. Если вы используете свойство html, вы должны предоставить свойство value.

Внутри BootstrapVue преобразует указанный выше массив в следующий формат (формат массив объектов):

const options = [
  { text: 'Item 1', value: 'first', disabled: false },
  { text: 'Item 2', value: 'second', disabled: false },
  { html: '<b>Item</b> 3', value: 'third', disabled: true },
  { text: 'Item 4', value: 'Item 4', disabled: false },
  { text: 'Item 5', value: 'E', disabled: false }
]

Изменение названий полей опций

Если вы хотите настроить имена свойств поля (например, используя поле name для отображения text), вы можете легко изменить их, установив text-field, html-field, value-field и disabled-field прописывает строку, содержащую имя свойства, которое вы хотели бы использовать:

<template>
  <div>
    <b-form-radio-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-radio-group>
    <div class="mt-3">Выбранное: <strong></strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Option A' },
          { item: 'B', name: 'Option B' },
          { item: 'D', name: 'Option C', notEnabled: true },
          { item: { d: 1 }, name: 'Option D' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-group-options-fields.vue -->

Значение радио и v-model

Компоненты <b-form-radio> не имеют значения по умолчанию. Вы должны явно указать значение через свойство value в <b-form-radio>. Это значение будет отправлено в v-model, когда радио будет проверено.

v-model как <b-form-radio>, так и <b-form-radio-group> привязывается к свойству checked. Чтобы предварительно проверить радио, вы должны установить значение v-model равным одному из значений радио (т.е. должно соответствовать значению, указанному в одном из параметра value). Не используйте свойство checked напрямую. Каждый радиомодуль в радиогруппе должен иметь уникальное значение.

Радио поддерживают значения многих типов, такие как string, boolean, number или простой object.

Инлайновые и стековые радио

По умолчанию <b-form-radio-group> генерирует встроенные радио, а <b-form-radio> генерирует сложенные радио. Установите свойство stacked на <b-form-radio-group>, чтобы радиостанции появлялись одно над другим, или при использовании радиостанций не в группе, установите свойство inline на b-form-radio значение true, чтобы сделать их встроенными.

<template>
  <div>
    <b-form-group label="Inline radios (default)" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-inline"
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-stacked"
        stacked
      ></b-form-radio-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong></strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-stacked.vue -->

Размеры элементов

Используйте опцию size для управления размером радио. Размер по умолчанию - средний. Поддерживаемые значения размера: sm (маленький) и lg (большой).

<div>
  <b-form-radio name="radio-size" size="sm">Маленький</b-form-radio>
  <b-form-radio name="radio-size">По умолчанию</b-form-radio>
  <b-form-radio name="radio-size" size="lg">Большой</b-form-radio>
</div>

<!-- form-radio-sizes.vue -->

Размеры могут быть заданы для отдельных компонентов <b-form-radio> или унаследованы от параметра size в <b-form-radio-group>.

Примечание: Bootstrap v4.x изначально не поддерживает размеры для настраиваемых элементов управления радио. Однако BootstrapVue включает настраиваемый SCSS/CSS, который добавляет поддержку для изменения размера настраиваемых радио.

Радио кнопочного типа

Визуализируйте радио как кнопки, установив для свойства buttons значение true в <b-form-radio-group>. Установите вариант кнопки, установив для свойства button-variant один из стандартных вариантов кнопки Bootstrap (смотрите <b-button> для поддерживаемых вариантов). По умолчанию button-variant является secondary.

Свойство buttons имеет приоритет над plain, а button-variant не имеет никакого эффекта, если buttons не установлено.

Радио в стиле кнопки будут иметь класс .active, автоматически примененный к их метке, когда они находятся в отмеченном состоянии.

<template>
  <div>
    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radios-btn-default"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group
      label="Button style radios with outline-primary variant and size lg"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
        buttons
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Stacked button style radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        id="btn-radios-3"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="radio-btn-stacked"
        buttons
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'radio1',
        options: [
          { text: 'Radio 1', value: 'radio1' },
          { text: 'Radio 3', value: 'radio2' },
          { text: 'Radio 3 (disabled)', value: 'radio3', disabled: true },
          { text: 'Radio 4', value: 'radio4' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-buttons.vue -->

Радиовводы нестандартного стиля (простые)

Вы можете сделать так, чтобы <b-form-radio> и <b-form-radio-group> отображали радио-ввод в собственном стиле браузера, установив свойство plain.

<template>
  <div>
    <b-form-group label="Plain inline radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-inline"
        plain
      ></b-form-radio-group>
    </b-form-group>

    <b-form-group label="Plain stacked radios" v-slot="{ ariaDescribedby }">
      <b-form-radio-group
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="plain-stacked"
        plain
        stacked
      ></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'first',
        options: [
          { text: 'First radio', value: 'first' },
          { text: 'Second radio', value: 'second' },
          { text: 'Third radio', value: 'third' }
        ]
      }
    }
  }
</script>

<!-- b-form-radio-plain.vue -->

Примечание: plain не будет иметь никакого эффекта, если установлено buttons/button.

Требуемое ограничение

При использовании отдельных компонентов <b-form-radio> (не в <b-form-radio-group>), и вы хотите, чтобы радио были required в вашей форме, вы должен предоставлять name для каждого <b-form-radio> для того, чтобы требуемое ограничение работало. Все компоненты <b-form-radio>, связанные с одной и той же v-model, должны иметь одинаковое name.

name требуется для того, чтобы вспомогательные технологии (такие как программы чтения с экрана и пользователи, использующие только клавиатуру) могли знать, какие радиостанции принадлежат одной и той же переменной формы (имя также автоматически включает встроенную навигацию с клавиатуры браузера), поэтому required будет только работать, если установлено name. <b-form-radio-group> автоматически сгенерирует уникальное имя входа, если оно не указано в группе.

Автофокус

Когда свойство autofocus установлено на <b-form-radio>, вход будет автоматически сфокусирован, когда он вставлен (т.е. установлен) в документ или повторно активирован, когда он находится внутри компонента Vue <keep-alive>. Обратите внимание, что это свойство не устанавливает атрибут autofocus на входе и не может сказать, когда ввод становится видимым.

Контекстные состояния

Bootstrap включает стили проверки valid и invalid состояний для большинства элементов управления формой.

Вообще говоря, вы захотите использовать определенное состояние для определенных типов обратной связи:

false (обозначает недопустимое состояние) отлично подходит, когда есть блокирующее или обязательное поле. Пользователь должен правильно заполнить это поле, чтобы отправить форму.
true (обозначает действительное состояние) идеально подходит для ситуаций, когда у вас есть проверка по каждому полю во всей форме и вы хотите поощрить пользователя через остальные поля.
null Не отображает состояние проверки (ни действительное, ни недействительное)

Чтобы применить один из значков контекстного состояния на <b-form-radio>, установите для свойства state значение false (для недопустимого), true (для допустимого) или null (состояние проверки отсутствует).

Примечание: Контекстное состояние не поддерживается для радиостанций, отображаемых в режиме кнопок.

Контекстное состояние с примером обратной связи

<template>
  <div>
    <b-form-radio-group v-model="value" :options="options" :state="state" name="radio-validation">
      <b-form-invalid-feedback :state="state">Пожалуйста, выберите один</b-form-invalid-feedback>
      <b-form-valid-feedback :state="state">Спасибо</b-form-valid-feedback>
    </b-form-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: null,
        options: [
          { text: 'Первое радио', value: 'first' },
          { text: 'Второе радио', value: 'second' },
          { text: 'Третье радио', value: 'third' }
        ]
      }
    },
    computed: {
      state() {
        return Boolean(this.value)
      }
    }
  }
</script>

<!-- b-form-radio-validation.vue -->

Передача состояния контекстной проверки вспомогательным технологиям и пользователям с дальтонизмом

Использование этих контекстных состояний для обозначения состояния элемента управления формы обеспечивает только визуальную цветовую индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с дальтонизмом.

Убедитесь, что также имеется альтернативная индикация состояния. Например, вы можете включить подсказку о состоянии в самом тексте элемента управления формой <label> или путем предоставления дополнительного текстового блока справки (например, <b-form-invalid-feedback>). В частности, для вспомогательных технологий недопустимым элементам управления формой также может быть назначен атрибут aria-invalid="true" (смотрите ниже).

Атрибут ARIA `aria-invalid`

Когда <b-form-radio-group> имеет недопустимое контекстное состояние (т.е. state = false), вам также может потребоваться для установки <b-form-radio-group> свойства aria-invalid значение true.

Поддерживаемые значения aria-invalid:

false (по умолчанию) Ошибок не обнаружено
true Значение не прошло проверку.

aria-invalid автоматически устанавливается в true, если свойство state имеет значение false.

Справочник по компонентам

`<b-form-radio-group>`

Смотреть источник

<b-form-radio-group> Псевдонимы компонентов
<b-form-radio-group> Свойства
<b-form-radio-group> v-model
<b-form-radio-group> Слоты
<b-form-radio-group> События

Псевдонимы компонентов

<b-form-radio-group> также может использоваться через следующие псевдонимы:

<b-radio-group>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`aria-invalid`	`Boolean` или `String`	`false`	Устанавливает значение атрибута 'aria-invalid' в элементе оболочки. Если не указано, свойство 'state' будет управлять атрибутом
`autofocus`	`Boolean`	`false`	Если установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
`button-variant`	`String`		Определяет вариант контекстной цветовой темы Bootstrap, применяемый к стилям радио кнопки
`buttons`	`Boolean`	`false`	Когда установлено, визуализирует радио в этой группе с помощью стиля кнопок
`checked` v-model	`Any`		Текущее значение отмеченного радио в группе
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`disabled-field`	`String`	`'disabled'`	Имя поля в массиве `options`, которое следует использовать для отключенного состояния
`form`	`String`		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
`html-field` Использовать с осторожностью	`String`	`'html'`	Имя поля в массиве `options`, которое следует использовать для html-метки вместо текстового поля
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`name`	`String`		Устанавливает значение атрибута `name` в элементе управления формы
`options`	`Array` или `Object`	`[]`	Массив элементов для визуализации в компоненте
`plain`	`Boolean`	`false`	Визуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
`required`	`Boolean`	`false`	Добавляет атрибут `required` в элемент управления формы
`size`	`String`		Установите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`stacked`	`Boolean`	`false`	Когда установлено, рендерит радиогруппу в сложенном режиме
`state`	`Boolean`	`null`	Управляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
`text-field`	`String`	`'text'`	Имя поля в массиве `options`, которое следует использовать для текстовой метки
`validated`	`Boolean`	`false`	Если установлено, добавляет класс Bootstrap 'was-validated' в оболочку группы
`value-field`	`String`	`'value'`	Имя поля в массиве `options`, которое следует использовать для значения

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

`v-model`

Свойство	Событие
`checked`	`input`

Слоты

Наименование	Описание
`default`	Контент (форма радио) для размещения в форме группа радио
`first`	Слот для размещения b-form-radio, чтобы они появлялись перед радио, созданными из опций опций

События

Событие	Аргументы	Описание
`change`	`checked` - Текущее выбранное значение радиогруппы	Генерируется, когда выбранное значение изменяется из-за взаимодействия с пользователем
`input`	`checked` - Текущее выбранное значение радиогруппы	Генерируется при изменении выбранного значения

`<b-form-radio>`

Смотреть источник

<b-form-radio> Псевдонимы компонентов
<b-form-radio> Свойства
<b-form-radio> v-model
<b-form-radio> Слоты
<b-form-radio> События

Псевдонимы компонентов

<b-form-radio> также может использоваться через следующие псевдонимы:

<b-radio>

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`aria-label`	`String`		Устанавливает значение атрибута `aria-label` для отображаемого элемента
`aria-labelledby`	`String`		Идентификатор элемента, который предоставляет метку для этого компонента. Используется как значение атрибута `aria-labelledby`
`autofocus`	`Boolean`	`false`	Если установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
`button`	`Boolean`	`false`	Когда установлено, отображает радио в виде кнопки
`button-variant`	`String`		Применяется к цветам темы Bootstrap в режиме 'button'
`checked` v-model	`Any`	`null`	Текущая стоимость радио
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`form`	`String`		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`inline`	`Boolean`	`false`	Если установлено, радио отображается как встроенный элемент, а не как блок шириной 100%
`name`	`String`		Устанавливает значение атрибута `name` в элементе управления формы
`plain`	`Boolean`	`false`	Визуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
`required`	`Boolean`	`false`	Добавляет атрибут `required` в элемент управления формы
`size`	`String`		Установите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
`state`	`Boolean`	`null`	Управляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
`value`	`Any`		Значение, возвращаемое при включении этого радио

`v-model`

Свойство	Событие
`checked`	`input`

Слоты

Наименование	Описание
`default`	Контент для размещения в форме радио

События

Событие	Аргументы	Описание
`change`	`checked` - Текущее выбранное значение радиогруппы	Генерируется, когда выбранное значение изменяется из-за взаимодействия с пользователем
`input`	`checked` - Текущее выбранное значение радиогруппы	Генерируется при изменении выбранного значения

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<b-form-radio-group>`	`BFormRadioGroup`	`bootstrap-vue`
`<b-form-radio>`	`BFormRadio`	`bootstrap-vue`

Пример:

import { BFormRadioGroup } from 'bootstrap-vue'
Vue.component('b-form-radio-group', BFormRadioGroup)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`FormRadioPlugin`	`bootstrap-vue`

Пример:

import { FormRadioPlugin } from 'bootstrap-vue'
Vue.use(FormRadioPlugin)

Индивидуальные радио

Сгруппированные радио

Массив опций радиогруппы

Параметры как массив объектов

Изменение названий полей опций

Значение радио и v-model

Инлайновые и стековые радио

Размеры элементов

Радио кнопочного типа

Радиовводы нестандартного стиля (простые)

Требуемое ограничение

Автофокус

Контекстные состояния

Контекстное состояние с примером обратной связи

Передача состояния контекстной проверки вспомогательным технологиям и пользователям с дальтонизмом

Атрибут ARIA aria-invalid

Справочник по компонентам

Псевдонимы компонентов

Свойства

v-model

Слоты

События

Псевдонимы компонентов

Свойства

v-model

Слоты

События

Импорт отдельных компонентов

Импортировать как плагин Vue.js

Атрибут ARIA `aria-invalid`

`v-model`

`v-model`