Clinical Office:MPage Suite

Radio Button Group and Radio Button Components

Overview

Radio buttons are an integral part of many data entry and prompt screens. They offer a simple method of letting users choose one value from a displayed list of options.

Radio buttons are grouped together, and the choice made by the user assigns a single group value to a variable object.

Required Imports

There are two ways to populate your radio button component. The first is to pass an array of string values into the <mpage-radio-group /> component and the second is to embed <mpage-radio-button /> components inside the <mpage-radio-group /> component. The majority of the time you will be using the first method, however, if you are ever in a situation where you need to dynamically populate the options in a radio button, manually adding radio buttons is simple.

To use the radio group component , you must import MpageRadioComponent from @clinicaloffice/mpage-developer and the FormsModule from @angular/forms. You must also include them in your component imports array in your component TypeScript file.

As with all other components in MPage Developer, the radio group component will size itself to the full size of its parent container.

If you plan on adding radio buttons manually, you also need to import MpageRadioButtonComponent from @clinicaloffice/mpage-developer.

e.g. your-component.ts

import {MpageRadioComponent, MpageRadioButtonComponent} from '@clinicaloffice/mpage-developer';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'your-component',
    imports: [MpageRadioComponent , MpageRadioButtonComponent, FormsModule],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

Method 1: Using An Array Of Strings

Populate an array of strings either directly in the values method of mpage-radio-group or by assigning an array from your TypeScript code.

<mpage-radio-group [(ngModel)]="radioValue" [values]="['MRN','FIN','Health Card']" label="Patient Identifier" />

Method 2: Manually Adding Radio Buttons

Radio buttons can be added as content to the <mpage-radio-group> component either through looping through an array or by manually hard coding values.

The example below represents a string array called radioValues which has the content of 'MRN', 'FIN', 'Health Card'. In addition to these values, the example adds an initial value of 'Custom Value'.

<mpage-radio-group [(ngModel)]="radioValue" label="Patient Identifier">
    <mpage-radio-button value="Custom Value" />
    @for(value of radioValues; track value) {
        <mpage-radio-button [value]="value" />
    }
</mpage-radio-group>

Radio Group Options

Option	Binding	Data Type	Default Value	Description
class	Input	string		CSS Class to apply to component.
disabled	Input	boolean	false	Determines if data entry is disabled.
label	Input	string		Label to display to end users describing component.
name	Input	string		Assign a name to component. If you are adding an [(ngModel)] inside an HTML form, you must assign names to all input components. This is only necessary when mixing [(ngModel)] inside a form and is not needed if just using [(ngModel)] or the Angular FormControl/FormArray objects.
[(ngModel)]	Input/Output	string		Data model variable.
required	Input	boolean	false	Highlights field that has no value.
style	Input	CSS Style Object		Any valid CSS styling.
title	Input	string		Text to display when a user hovers over a component.
values	Input	string[]	[]	Array of string values to display in radio group.

Radio Button Options

Option	Binding	Data Type	Default Value	Description
name	Input	string		Assign a name to component. If you are adding an [(ngModel)] inside an HTML form, you must assign names to all input components. This is only necessary when mixing [(ngModel)] inside a form and is not needed if just using [(ngModel)] or the Angular FormControl/FormArray objects.
value	Input	string		The text you wish to display on the radio button.

Styling

The radio button component is a subclass of the MPage Input component and shares all styling.

<< Prev: Prevent Scroll

Next: Remaining Screen Space >>