Checkbox Group

Checkbox group inputs allow the user to select multiple options from a set.

The ICheckboxGroup component allows you to control multiple selected values using a single binding.

Disabled State

You can disable an entire checkbox group using the disabled property.

Readonly State

You can disable an entire checkbox group using the readonly property.

Color Variants

You can use the color property to set a light or dark color for your checkboxes.

Size Variants

You're able to use the size property to control the size of your checkbox 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.

Options Object

The ICheckboxGroup 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 CheckboxGroupOption {
    id: string | number;
    label?: Renderable;
    disabled?: boolean;
    readonly?: boolean;
    [key: string]: any;

Read more about Renderable props.



Expressions are strings that can be interpolated using the {{ }} syntax.

Render Function

Render functions are functions that return a string or VNode. They receive the option being rendered as an argument.


You can also use a component to render each option. The component will receive the option being rendered as a prop named ctx (context).

Render Per Option

Each option's label field is a Renderable property. This means you can also use a render function to render each option's label.

Scoped Slot

The option scoped slot can be used to render each option. It receives the option being rendered as a prop named option.




Design Tokens