CheckBox

Власний компонент чекбокса зі станами-іконками.

Живе демо

Я погоджуюся з умовами використання

Підписатися на розсилку (іконка завантаження, коли позначено)

Увімкнути сповіщення (іконка «плюс», коли не позначено)

Вибір:
Умови: ✗ Не погоджено
Розсилка: ✓ Підписано
Сповіщення: ✗ Вимкнено

Використання

<template>
  <orio-check-box v-model="accepted"> I accept the terms </orio-check-box>
</template>

<script setup>
const accepted = ref(false);
</script>

Пропси

Проп	Тип	За замовчуванням	Опис
modelValue	boolean	-	Стан чекбокса (v-model)
checkedIcon	string	undefined	Назва іконки для позначеного стану
uncheckedIcon	string	undefined	Назва іконки для непозначеного стану

Події

Подія	Дані	Опис
update:modelValue	boolean	Генерується під час зміни стану чекбокса

Слоти

Слот	Пропси	Опис
default	-	Текст/вміст підпису
icon	{ checked: boolean }	Власний вміст іконки для стану позначки