Checkbox

Cette page couvre :

• TheCheckbox
• CheckboxPolicy

Props

TheCheckbox

• id: string
• name?: string
• label?: string

CheckboxPolicy

• id: string
• name?: string
• title?: string
• description?: string
• required?: boolean
• errorMessage?: string

CheckboxPolicy expose aussi une validation locale via check() et reset().

Variables CSS exposées

TheCheckbox

• --DFV-checkbox-background
• --DFV-checkbox-border-color
• --DFV-checkbox-hover-border-color
• --DFV-checkbox-checked-background
• --DFV-checkbox-checked-border-color
• --DFV-checkbox-indicator
• --DFV-checkbox-focus
• --DFV-checkbox-label-color

CheckboxPolicy

• --DFV-checkbox-policy-background
• --DFV-checkbox-policy-border-color
• --DFV-checkbox-policy-title-color
• --DFV-checkbox-policy-description-color
• --DFV-checkbox-policy-required-color
• --DFV-checkbox-policy-error-color

Exemple

vue

<script setup lang="ts">
import {
	CheckboxPolicy,
	TheCheckbox,
} from "@duplojs/form/vueDesignSystem";
import { ref } from "vue";

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

<template>
	<div style="display: grid; gap: 12px;">
		<TheCheckbox
			v-model="checked"
			id="newsletter"
			label="Subscribe to newsletter"
		/>

		<CheckboxPolicy
			v-model="accepted"
			id="terms"
			title="Accept terms"
			description="You must accept before continuing."
			required
		/>
	</div>
</template>