Checkbox
Using the ICheckbox component to determine a boolean value is very straightforward:
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(false);
</script>
<template>
<ICheckbox v-model="checked">Apple</ICheckbox>
</template>
You can disable a checkbox using the disabled property.
<script lang="ts">
export default {
data() {
return {
unchecked: false,
checked: true
};
}
};
</script>
<template>
<ICheckbox v-model="unchecked" disabled>Unchecked</ICheckbox>
<ICheckbox v-model="checked" disabled>Checked</ICheckbox>
</template>
You can make a checkbox readonly using the readonly property.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(true);
</script>
<template>
<ICheckbox v-model="checked" readonly>Apple</ICheckbox>
</template>
You can set the state of a <ICheckbox> to be indeterminate by using the indeterminate property.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(false);
</script>
<template>
<ICheckbox v-model="checked" indeterminate>Apple</ICheckbox>
</template>
You can use the color property to set a light or dark color for your checkboxes.
<script lang="ts">
export default {
data() {
return {
light: false,
dark: false
};
}
};
</script>
<template>
<div>
<div
class="_background:white _display:flex _align-items:center _padding:1"
style="height: 50px"
>
<ICheckbox v-model="light" color="light">Light</ICheckbox>
</div>
<div
class="_background:gray-90 _display:flex _align-items:center _padding:1"
style="height: 50px"
>
<ICheckbox v-model="dark" color="dark">Dark</ICheckbox>
</div>
</div>
</template>
You're able to use the size property to control the size of your checkbox, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script lang="ts" setup>
import { ref } from 'vue';
const md = ref(false);
const sm = ref(false);
const lg = ref(false);
</script>
<template>
<ICheckbox v-model="sm" size="sm">Small</ICheckbox>
<ICheckbox v-model="md" size="md">Medium</ICheckbox>
<ICheckbox v-model="lg" size="lg">Large</ICheckbox>
</template>
Inkline uses a custom checkbox design by default. You can use the native property to use native browser checkbox indicators.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(false);
</script>
<template>
<ICheckbox v-model="checked" native>Apple</ICheckbox>
</template>