Чекбокс

Круглый чекбокс Alixan UI для boolean, одиночного значения и множественного выбора.

Установка

npx alixan-ui-nuxt add checkbox

Использование

Accept terms

7 d

30 d

SMS

<script setup lang="ts">
const accepted = ref(false)
const selectedPeriod = ref('7d')
const selectedOptions = ref(['email'])
</script>

<template>
  <Checkbox v-model="accepted" label="Accept terms" />

  <Checkbox v-model="selectedPeriod" value="7d" label="7 d" />
  <Checkbox v-model="selectedPeriod" value="30d" label="30 d" />

  <Checkbox v-model="selectedOptions" mode="multiple" value="email" label="Email" />
  <Checkbox v-model="selectedOptions" mode="multiple" value="sms" label="SMS" />
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
modelValue	boolean \| string \| number \| Array<string \| number> \| null	false	Выбранное состояние, используемое через v-model.
mode	'single' \| 'multiple'	'single'	Single хранит boolean или одно значение. Multiple хранит массив.
value	string \| number	-	Значение для single value режима или multiple array режима.
label	string	-	Опциональный label рядом с круглым контролом.
disabled	boolean	false	Отключает взаимодействие с checkbox.