PandaGo Components

Appearance

Return to top
On this page

Checkbox

This is a simple checkbox.

Usage

This is a basic checkbox. Try changing the props and slots to see how it reacts.

	Is checked?: true

Props

CheckboxVModel v-modelTwo way binding of the checkbox value. If it is an array, it will be filled with the checkboxValue. Default value: undefined
any checkboxValueThe intrinsic value of the checkbox. If the checkbox v-model is an array and this checkbox is checked, this value will be added to the `v-model` array. Default value: undefined
boolean hasErrorIndicates if there is an error with the input validation. Only seen in the design system skin when the checkbox is not checked. Default value: false
ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads

WARNING

The checkboxValue prop should be provided if the v-model is an array for the component to work fine.

Options

Make it disabledDisable the input to not allow user interaction
Make it partially checkedWhen some sub-elements are checked but not all or similar use cases
Make it a multiple selection checkboxIf the v-model variable is an array, then the checkboxValue prop is used as value

Slots

defaultThe content at the right of the checkbox

Implementation details

The component is an actual checkbox input, so it can be used in a form as a normal HTML element.

Here, properties like disabled, required and readonly are passed to the input element via the v-bind="$attrs".

Also, when the v-model is an array of elements, the checkbox takes the id property from the stringified element, as shown here.

template
<input
	:id="JSON.stringify(modelValue)"
	ref="check"
	type="checkbox"
	v-bind="$attrs"
	:checked="isChecked"
	@click="toggleCheck($event.target)"
>

Type declarations

CheckboxVModel

ts
export type CheckboxVModel = any[] | boolean | 'partial';

ComponentSkin

ts
export enum ComponentSkin {
	PANDA = 'panda',
	DESIGN_SYSTEM = 'ds',
}