Checkbox

A circular iOS-style checkbox for boolean, single-value and multiple-value selection.

Installation

npx alixan-ui-nuxt add checkbox

Usage

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 Reference

Prop	Type	Default	Description
modelValue	boolean \| string \| number \| Array<string \| number> \| null	false	Selected state used by v-model.
mode	'single' \| 'multiple'	'single'	Single stores a boolean or one value. Multiple stores an array.
value	string \| number	-	Value used for single value mode or multiple array mode.
label	string	-	Optional label rendered next to the circular control.
disabled	boolean	false	Disables checkbox interaction.