Checkbox Group

Overview

Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

When to use

• These can be used within forms on a full page, in modals or to toggle an individual item.
• They can also be used to change from one setting to another in a menu, page, or component.
• Finally they can be useful for table rows or lists to select a singular item.

When not to use

• If a user can select only one option from a list, radio buttons should be used instead of checkboxes.
• Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Checkbox Group

Label (optional)

One

Two

Three

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Container Hidden

boolean

false

Defines whether each checkbox option is wrapped in a container or not.

Toggle Prop

Error

string

string[]

Errors to display for the input.

 

Help Text

string

string[]

The help text to display for the input.

 

Label

string

Required

The label to be shown beside the checkbox button.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Name

string

Required

The name of the checkbox group.

 

Options

Array<CheckboxOption>

export interface CheckboxOption {
  value: string | number | boolean;
  label: string;
}

Required

The list of options that the user can select from.

Value 

Label 

Value 

Label 

Value 

Label 

Required

boolean

false

If the field is required

Toggle Prop

Vertical

boolean

false

Controls whether checkboxes should render in a vertical list

Toggle Prop

Default

Label (optional)

Help text

One

Two

Three

<template>
  <DocExample>
    <MedKitCheckboxGroup
      label="Label"
      helpText="Help text"
      labelPosition="end"
      name="exampleDefault"
      :options="[
        { label: 'One', value: 1 },
        { label: 'Two', value: 2 },
        { label: 'Three', value: 3 }
      ]"
    />
  </DocExample>
</template>

Help Text

Label (optional)

A useful hint for the user

One

Two

Error State

Error message will display if it's present.

 

One

Two

This is required

Without Container

Label (optional)

Help text

One

Two

Three

<template>
  <DocExample>
    <MedKitCheckboxGroup
      label="Label"
      helpText="Help text"
      labelPosition="end"
      name="exampleWithoutContainer"
      :options="[
        { label: 'One', value: 1 },
        { label: 'Two', value: 2 },
        { label: 'Three', value: 3 }
      ]"
      container-hidden
    />
  </DocExample>
</template>

Vertical

Label (optional)

Help text

One

Two

Three

<template>
  <DocExample>
    <MedKitCheckboxGroup
      label="Label"
      helpText="Help text"
      labelPosition="end"
      name="exampleVertical"
      :options="[
        { label: 'One', value: 1 },
        { label: 'Two', value: 2 },
        { label: 'Three', value: 3 }
      ]"
      vertical
      container-hidden
    />
  </DocExample>
</template>

Figma Library

You can find the component in our MedKit Figma library.