The ICheckboxButtons component allows you to control multiple selected values using a single binding.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['apple']);
const options = ref([
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'mango', label: 'Mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" />
</template>
You can disable an entire checkbox buttons group using the disabled property.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['apple']);
const options = ref([
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'mango', label: 'Mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" disabled />
</template>
You can disable an entire checkbox buttons group using the readonly property.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['strawberry']);
const options = ref([
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'mango', label: 'Mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" readonly />
</template>
You can use the color property to set a light or dark color for your checkboxes.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['apple']);
const options = ref([
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'mango', label: 'Mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" color="light" :options="options" />
<ICheckboxButtons v-model="checked" color="dark" :options="options" />
</template>
You're able to use the size property to control the size of your checkbox buttons group, using one of the available sizes: sm, md, and lg. The default size is set to md.
The chosen size will be applied to all of its child inputs.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['strawberry']);
const options = ref([
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'mango', label: 'Mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" size="sm" />
<ICheckboxButtons v-model="checked" :options="options" size="md" />
<ICheckboxButtons v-model="checked" :options="options" size="lg" />
</template>
You're able to use the variant property to control the aspect of your checkbox buttons group, using one of the available variants: default, and button-group. The default variant is set to default.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['apple']);
const options = ref([
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana' },
{ id: 'strawberry', label: 'Strawberry' },
{ id: 'mango', label: 'Mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" variant="default" />
<ICheckboxButtons v-model="checked" :options="options" variant="group" />
</template>
The ICheckboxButtons component accepts an array of objects as its options prop.
- each item must contain a
id property - the
modelValue property will be an array of the selected id values - the
label property is a Renderable will be used as the checkbox label.
export interface CheckboxButtonsOption {
id: string | number;
label?: Renderable;
disabled?: boolean;
readonly?: boolean;
buttonProps?: Record<string, unknown>;
[key: string]: any;
}
Read more about Renderable props.
Expressions are strings that can be interpolated using the {{ }} syntax.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['apple']);
const options = ref([
{ id: 'apple', fruit: { name: 'Apple' } },
{ id: 'banana', fruit: { name: 'Banana' } },
{ id: 'strawberry', fruit: { name: 'Strawberry' } },
{ id: 'mango', fruit: { name: 'Mango' } }
]);
const labelRenderString = '{{fruit.name}}';
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" :label="labelRenderString" />
</template>
Render functions are functions that return a string or VNode. They receive the option being rendered as an argument.
<script lang="ts" setup>
import { h, ref } from 'vue';
import type { LabelRenderFunction, CheckboxButtonOption } from '@inkline/inkline';
const checked = ref(['apple']);
const options = ref<CheckboxButtonOption[]>([
{ id: 'apple' },
{ id: 'banana' },
{ id: 'strawberry' },
{ id: 'mango' }
]);
const labelRenderFunction: LabelRenderFunction<CheckboxButtonOption> = (option) =>
h('strong', option.id);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" :label="labelRenderFunction" />
</template>
You can also use a component to render each option. The component will receive the option being rendered as a prop named ctx (context).
<script lang="ts" setup>
import { defineComponent, h, markRaw, ref } from 'vue';
import type { CheckboxButtonOption } from '@inkline/inkline';
const LabelRenderComponent = markRaw(
defineComponent({
props: {
ctx: {
type: Object,
default: () => ({})
}
},
setup(props) {
return () => h('strong', props.ctx.id);
}
})
);
const checked = ref(['apple']);
const options = ref<CheckboxButtonOption[]>([
{ id: 'apple' },
{ id: 'banana' },
{ id: 'strawberry' },
{ id: 'mango' }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" :label="LabelRenderComponent" />
</template>
Each option's label field is a Renderable property. This means you can also use a render function to render each option's label.
<script lang="ts" setup>
import { h, ref } from 'vue';
const checked = ref(['apple']);
const options = ref([
{ id: 'apple', label: () => h('strong', { class: '_color:green' }, 'Apple') },
{ id: 'banana', label: () => h('strong', { class: '_color:yellow' }, 'Banana') },
{ id: 'strawberry', label: () => h('strong', { class: '_color:red' }, 'Strawberry') },
{ id: 'mango', label: () => h('strong', { class: '_color:orange' }, 'Mango') }
]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options" />
</template>
The option scoped slot can be used to render each option. It receives the option being rendered as a prop named option.
<script lang="ts" setup>
import { ref } from 'vue';
const checked = ref(['apple']);
const options = ref([{ id: 'apple' }, { id: 'banana' }, { id: 'strawberry' }, { id: 'mango' }]);
</script>
<template>
<ICheckboxButtons v-model="checked" :options="options">
<template #option="{ option }">
{{ option.id }}
</template>
</ICheckboxButtons>
</template>