Radio button

Show 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