FormSwitch

Переключатель формы с информационным Alert. Повторяет поведение FormCheckbox, но использует визуальный контрол Switch.

Основа компонента

Компонент построен на Switch и Form из Ant Design Vue.

Привязка к модели формы

Если данный компонен расположен внутри Form достаточно указать name:, отдельный v-model не требуется.

Подробнее — в документации Form.

vue

<script setup lang="ts">
import { reactive } from 'vue'
import { Form, FormSwitch } from '@minitwiks/nsmp-vue-components'

const model = reactive({ notifications: true })
</script>

<template>
  <Form :model="model">
    <FormSwitch
      label="Получать уведомления"
      name="notifications"
      description="Уведомления можно отключить в любой момент"
    />
  </Form>
</template>

Prop label отображается справа от переключателя и может быть переопределён default-слотом. Доступны быстрые props checked, label, name, rules и description, а полная настройка выполняется через formItemProps, alertProps и switchProps.

FormSwitch ​

FormSwitch