@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
55 lines (54 loc) • 2.29 kB
TypeScript
/**
* OcCheckbox - A customizable checkbox component supporting single checkboxes and checkbox groups.
*
* @prop {string} [id] - Unique identifier for the checkbox input. If not provided, an auto-generated ID will be used.
* @prop {boolean|Array} [modelValue=false] - Value bound to the checkbox. Boolean for single checkboxes, array for checkbox groups.
* @prop {boolean} [disabled=false] - Whether the checkbox is disabled.
* @prop {any} [option=null] - Value associated with the checkbox when used in a checkbox group with array binding.
* @prop {string} [label=null] - Text label displayed next to the checkbox.
* @prop {boolean} [labelHidden=false] - Whether to hide the label visually but keep it accessible to screen readers.
* @prop {'small'|'medium'|'large'} [size='medium'] - Size of the checkbox.
*
* @event {Event} click - Emitted when the checkbox is clicked.
* @event {boolean|Array} update:modelValue - Emitted when the checkbox value changes.
*
* @example
* ```vue
* <!-- Basic checkbox -->
* <oc-checkbox v-model="isChecked" label="label" />
*
* <!-- Disabled checkbox -->
* <oc-checkbox v-model="isChecked" label="label" disabled />
*
* <!-- Different sizes -->
* <oc-checkbox size="small" label="label" />
* <oc-checkbox label="label" />
* <oc-checkbox size="large" label="label" />
*
* <!-- Checkbox group with array model -->
* <oc-checkbox
* v-for="option in ['a', 'b', 'c']"
* :key="option"
* v-model="selectedOptions"
* :option="option"
* :label="option"
* />
* ```
*/
interface Props {
id?: string;
modelValue?: boolean | unknown[];
disabled?: boolean;
option?: unknown;
label?: string;
labelHidden?: boolean;
size?: 'small' | 'medium' | 'large';
}
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
click: (event: Event) => any;
"update:modelValue": (value: boolean | unknown[]) => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
onClick?: (event: Event) => any;
"onUpdate:modelValue"?: (value: boolean | unknown[]) => any;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
export default _default;