MedKit

Radio Group ​

Overview ​

Radio groups allow users to make choices or decisions. Radio groups are used for mutually exclusive choices, not for multiple choices.

The foremost feature of radio groups is that all choices are visible. This can be good when there are limited number of choices and speed of completion is paramount. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected. Avoid long lists of radio buttons (usually no more than 6-8 options).

When to use
  • Radio buttons can be used across forms, modals or to make an individual decision.
  • They can be used in table rows or lists where the user is tasked with selecting a single item or row.
When not to use
  • If a user can select many options from a list, use checkboxes instead of a radio group.
  • Radio groups allow the user to select only one item in a set whereas checkboxes allow the user to select multiple options.

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 Radio Group
Label (optional)
Container Hidden
boolean
false
Defines whether each radio option is wrapped in a container or not.
Error
string
Array<string>
Errors to display for the input.
Help Text
string
Array<string>
The help text to display for the input.
Label
string
Required
The label to be shown beside the switch.
Label Hidden
boolean
false
Only display the label for screen readers.
Name
string
Required
The name of the radio button group.
Options
Array<RadioOption>
Required
The list of options that the user can select from.
Required
boolean
false
If the field is required
Vertical
boolean
false
Controls whether the radios should render in a vertical list

Default ​

Label (optional)
Help text
vue
<template>
  <DocExample>
    <MedKitRadioGroup
      v-model="modelValue"
      label="Label"
      helpText="Help text"
      labelPosition="end"
      name="exampleDefault"
      :options="options"
    />
  </DocExample>
</template>

Help Text & Error ​

Generally radios are only considered in groups. As such help text and validation handling spans the group.

Help Text ​

Label (optional)
Help text
vue
<template>
  <DocExample>
    <MedKitRadioGroup
      label="Label"
      helpText="Help text"
      labelPosition="end"
      v-model="modelValue"
      name="exampleHelpText"
      :options="options"
    />
  </DocExample>
</template>

Error ​

Label (optional)
Error
vue
<template>
  <DocExample>
    <MedKitRadioGroup
      v-model="modelValue"
      label="Label"
      error="Error"
      helpText="Help text"
      labelPosition="end"
      name="exampleError"
      :options="options"
    />
  </DocExample>
</template>

Container ​

Radio buttons can be displayed with or without a container. Although radio buttons can be used without a container, more often than not the container should be used if the use case is ‘Answering a question’. The exceptions to this are when used in lists or in specialised use cases.

Without Container ​

Label (optional)
Help text
Label (optional)
Error
vue
<template>
  <DocExample>
    <MedKitRadioGroup
      label="Label"
      containerHidden
      helpText="Help text"
      labelPosition="end"
      v-model="radioGroupDefaultModelValue"
      name="exampleWithoutContainer"
      :options="options"
    />
  </DocExample>
  <DocExample>
    <MedKitRadioGroup
      label="Label"
      containerHidden
      error="Error"
      labelPosition="end"
      v-model="radioGroupErrorModelValue"
      name="exampleWithoutContainer"
      :options="options"
    />
  </DocExample>
</template>

Vertical ​

Radio groups can be displayed in a vertical list. This display could be used when the radio group is limited to a small column width or if the option labels are long.

Label (optional)
Help text
vue
<template>
  <DocExample>
    <MedKitRadioGroup
      label="Label"
      helpText="Help text"
      labelPosition="end"
      v-model="modelValue"
      name="exampleVertical"
      :options="[
        {
          label:
            'One, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat suscipit suscipit. Suspendisse fringilla tortor in risus vestibulum, eget sodales elit tristique.',
          value: 1
        },
        {
          label:
            'Two, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat suscipit suscipit. Suspendisse fringilla tortor in risus vestibulum, eget sodales elit tristique.',
          value: 2
        },
        {
          label:
            'Three, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat suscipit suscipit. Suspendisse fringilla tortor in risus vestibulum, eget sodales elit tristique.',
          value: 3
        }
      ]"
      vertical
    />
  </DocExample>
</template>

Boolean ​

Radio groups can represent boolean values.

Label (optional)
Help text
vue
<template>
  <DocExample>
    <MedKitRadioGroup
      v-model="modelValue"
      label="Label"
      helpText="Help text"
      labelPosition="end"
      name="Yes or No"
      :options="options"
    />
  </DocExample>
</template>

Figma Library ​

You can find the component in our MedKit Figma library.

Copyright © Big Picture Medical