Radio button

Show design guidelines

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

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description

layout

Attribute	layout
Type	"inline" | "inline-block" | "stacked" | "standalone"
Default	'inline'
Required	false
Description

name

Attribute	name
Type	string
Default	undefined
Required	false
Description

size

Attribute	size
Type	"md" | "sm"
Default	'md'
Required	false
Description

value

Attribute	value
Type	any
Default	'on'
Required	false
Description

Events

Name	Description	Bubbles
certaraBlur	Standard event emitted when radio is blurred	true
certaraChange	Standard event emitted when radio is toggled	true
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
error	Error text that sits below the label
help	Help text that sits below the label