Radio button

Design guidelines

Use radio buttons where users must make a single selection.

Code

Framework

HTML

React

Angular

Stacked layout

Option 1 Help or instructional text goes here Option 2

Toggle dark mode

<certara-form-group label="Enabled group" variant="fieldset">
  <certara-radio layout="stacked" name="example-01">
    Option 1
    <span slot="help">Help or instructional text goes here</span>
  </certara-radio>
  <certara-radio layout="stacked" name="example-01">Option 2</certara-radio>
</certara-form-group>

import { CertaraFormGroup, CertaraRadio } from '@certara/certara-ui-react';

<CertaraFormGroup label="Enabled group" variant="fieldset">
  <CertaraRadio layout="stacked" name="example-01">
    Option 1
    <span slot="help">Help or instructional text goes here</span>
  </CertaraRadio>
  <CertaraRadio layout="stacked" name="example-01">Option 2</CertaraRadio>
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Enabled group" variant="fieldset">
  <certara-radio layout="stacked" name="example-01">
    Option 1
    <span slot="help">Help or instructional text goes here</span>
  </certara-radio>
  <certara-radio layout="stacked" name="example-01">Option 2</certara-radio>
</certara-form-group>

Inline medium

Aspera HTTPS

Toggle dark mode

<certara-form-group label="Upload with" layout="horizontal">
  <certara-radio name="example-1" layout="inline">Aspera</certara-radio>
  <certara-radio name="example-1" layout="inline">HTTPS</certara-radio>
</certara-form-group>

import { CertaraFormGroup, CertaraRadio } from '@certara/certara-ui-react';

<CertaraFormGroup label="Upload with" layout="horizontal">
  <CertaraRadio name="example-1" layout="inline">Aspera</CertaraRadio>
  <CertaraRadio name="example-1" layout="inline">HTTPS</CertaraRadio>
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Upload with" layout="horizontal">
  <certara-radio name="example-1" layout="inline">Aspera</certara-radio>
  <certara-radio name="example-1" layout="inline">HTTPS</certara-radio>
</certara-form-group>

Inline small

Aspera HTTPS

Toggle dark mode

<certara-form-group label="Upload with" layout="horizontal">
  <certara-radio name="example-3" layout="inline" size="sm">Aspera</certara-radio>
  <certara-radio name="example-3" layout="inline" size="sm">HTTPS</certara-radio>
</certara-form-group>

import { CertaraFormGroup, CertaraRadio } from '@certara/certara-ui-react';

<CertaraFormGroup label="Upload with" layout="horizontal">
  <CertaraRadio name="example-3" layout="inline" size="sm">Aspera</CertaraRadio>
  <CertaraRadio name="example-3" layout="inline" size="sm">HTTPS</CertaraRadio>
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Upload with" layout="horizontal">
  <certara-radio name="example-3" layout="inline" size="sm">Aspera</certara-radio>
  <certara-radio name="example-3" layout="inline" size="sm">HTTPS</certara-radio>
</certara-form-group>

Disabled

Disabled off Disabled on

Toggle dark mode

<certara-form-group label="Disabled Group" variant="fieldset">
  <certara-radio layout="stacked" name="example-02" disabled>Disabled off</certara-radio>
  <certara-radio layout="stacked" name="example-02" disabled checked>Disabled on</certara-radio>
</certara-form-group>

import { CertaraFormGroup, CertaraRadio } from '@certara/certara-ui-react';

<CertaraFormGroup label="Disabled Group" variant="fieldset">
  <CertaraRadio layout="stacked" name="example-02" disabled>Disabled off</CertaraRadio>
  <CertaraRadio layout="stacked" name="example-02" disabled checked>Disabled on</CertaraRadio>
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Disabled Group" variant="fieldset">
  <certara-radio layout="stacked" name="example-02" disabled>Disabled off</certara-radio>
  <certara-radio layout="stacked" name="example-02" disabled checked>Disabled on</certara-radio>
</certara-form-group>

certara-radio

Properties

checked

Attribute	checked
Type	boolean
Default	false
Required	false
Description	The checked state of the radio

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	The disabled state of the radio

layout

Attribute	layout
Type	"inline" | "inline-block" | "stacked" | "standalone"
Default	'inline'
Required	false
Description	Stacked radios have one per line, inline radios are all on the same line

name

Attribute	name
Type	string
Default	undefined
Required	false
Description	The name of the radio

size

Attribute	size
Type	"md" | "sm"
Default	'md'
Required	false
Description	The size of the checkbox

value

Attribute	value
Type	any
Default	'on'
Required	false
Description	The value of the radio

Events

Name	Description	Bubbles
certaraBlur	Standard event emitted when radio is blurred	true
certaraChange	Standard event emitted when radio is toggled	false
certaraFocus	Standard event emitted when radio is focused	true

Methods

There are no public methods available for this component

Slots

Name	Description
	Content for the label
help	Help text that sits below the label

Design guidelines

Variants

Stacked layout

Option 1 Help or instructional text goes here Option 2 Disabled off Disabled on

Toggle dark mode

Horizontal layout

From your uploaded ZIP file data, or, if you have no define.xml Published version from the define designer (Enabled after one is published) Latest draft version from the Define Designer

Toggle dark mode

Inline medium

Aspera HTTPS Disabled off Disabled on

Toggle dark mode

Inline small

Aspera HTTPS Disabled off Disabled on

Toggle dark mode

In practice

Radio buttons should:

• Always be used with an associated label component.
• Be part of a list of radio buttons that:
  • Include at least two or more choices.
  • Are used to have users select only one option.
  • Include mutually exclusive options — this means that each option must be independent from every other option in the list. For example: Red, blue, and yellow are mutually exclusive. Red, blue, yellow, red/blue are not mutually exclusive.
  • List options in a rational order that makes logical sense.
  • Have a default option selected whenever possible.
    • A default option should only be avoided when the choices relate to a user’s privacy preferences, such as notifications settings, or sensitive personal information, such as gender.

Content guidelines

Labels

• Keep radio labels short and descriptive.
• Start all radio buttons labels with a capital letter.
• Don’t include punctuation after radio button labels.

Accessibility

Keyboard support

• Move focus to each radio using the tab key (or shift + tab when tabbing backwards)
• To interact with the radio when it has keyboard focus, press the space key

Design resources

View component in Figma