Radio button

Use radio buttons where users must make a single selection.

Code

Variants

Certara UI

Stacked layout

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

Toggle dark mode

<certara-form-group label="Enabled group" variant="fieldset" error="Error message">
  <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>
<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>

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

<certara-form-group label="Define source" layout="horizontal" error="Error message">
  <certara-radio layout="stacked" name="example-0">
      From your uploaded ZIP file data, or, if you have no define.xml
  </certara-radio>
  <certara-radio layout="stacked" name="example-0" disabled>
      Published version from the define designer
      (Enabled after one is published)
  </certara-radio>
  <certara-radio layout="stacked" name="example-0">
      Latest draft version from the Define Designer
  </certara-radio>
</certara-form-group>

Inline medium

Aspera HTTPS Disabled off Disabled on

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>

<certara-form-group label="Data Package Type" layout="horizontal" error="Error message">
  <certara-radio name="example-2" layout="inline" disabled>
      Disabled off
  </certara-radio>
  <certara-radio name="example-2" layout="inline" disabled checked>
      Disabled on
  </certara-radio>
</certara-form-group>

Inline small

Aspera HTTPS Disabled off Disabled on

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>

<certara-form-group label="Data Package Type" layout="horizontal" error="Error message">
  <certara-radio name="example-4" layout="inline" disabled size="sm">
      Disabled off
  </certara-radio>
  <certara-radio name="example-4" layout="inline" disabled checked size="sm">
      Disabled on
  </certara-radio>
</certara-form-group>

certara-radio

Properties

Property	Attribute	Description	Type	Default
checked	checked		boolean	false
disabled	disabled		boolean	false
layout	layout		"inline" | "stacked"	'inline'
name	name		string	undefined
size	size		"md" | "sm"	'md'
value	value		any	'on'

Events

Event	Description	Type
certaraBlur	Standard event emitted when radio is blurred	CustomEvent<void>
certaraChange	Standard event emitted when radio is toggled	CustomEvent<CheckboxChangeEventDetail<any>>
certaraFocus	Standard event emitted when radio is focused	CustomEvent<void>

Slots

Slot	Description
	Content for the label
"error"	Error text that sits below the label
"help"	Help text that sits below the label

Dependencies

Depends on

• certara-checkbox

Graph

graph TD;
  certara-radio --> certara-checkbox
  certara-checkbox --> certara-help-block
  style certara-radio fill:#f9f,stroke:#333,stroke-width:4px

---

HTML

Stacked layout

Enabled Group

Error message

Option 1 Help or instructional text goes here

Option 2

Disabled Group

Disabled off

Disabled on

Toggle dark mode

<div>
    <h3 id="enabledHdr" class="text-base">Enabled Group</h3>
    <div class="form-group" role="group" aria-labelledby="enabledHdr">
      <div class="form-error" role="alert">Error message</div>
      <div class="form-check">
        <input type="radio" name="input-name" id="input-id1-one" class="form-check__input">
        <label class="form-check__label" for="input-id1-one">
          Option 1
          <span class="help-block">
            <span class="help-block__text">Help or instructional text goes here</span>
          </span>
        </label>
      </div>
      <div class="form-check">
        <input type="radio" name="input-name" id="input-id2-one" class="form-check__input">
        <label class="form-check__label" for="input-id2-one">
          Option 2
        </label>
      </div>
    </div>
    <h3 id="disableddHdr" class="text-base mt-8">Disabled Group</h3>
    <div class="form-group" role="group" aria-labelledby="disableddHdr">
      <div class="form-check">
        <input disabled type="radio" name="input-name-disabled" id="input-id-disabled" class="form-check__input">
        <label class="form-check__label" for="input-id-disabled">
          Disabled off
        </label>
      </div>
      <div class="form-check">
        <input disabled checked type="radio" name="input-name-disabled" id="input-id-disabled-selected" class="form-check__input">
        <label class="form-check__label" for="input-id-disabled-selected">
          Disabled on
        </label>
      </div>
    </div>
  </div>

Horizontal layout

Define source

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

Error message

Toggle dark mode

<div class="form-group row mx-auto" style="width:90%">
    <div class="col-sm-3 col-md-2"><h3 class="text-base" id="radioGroupHdr">Define source</div>
    <div class="col-sm-9 col-md-10" role="group" aria-labelledby="radioGroupHdr">
      <div class="form-check">
        <input type="radio" name="input-name" id="input-id1-two" class="form-check__input" />
        <label class="form-check__label" for="input-id1-two">
          From your uploaded ZIP file data, or, if you have no define.xml
        </label>
      </div>
      <div class="form-check">
        <input disabled type="radio" name="input-name" id="input-id2-two" class="form-check__input" />
        <label class="form-check__label" for="input-id2-two">
          Published version from the define designer
          <span class="help-block">
            <span class="help-block__text">(Enabled after one is published)</span>
          </span>
        </label>
      </div>
      <div class="form-check">
        <input type="radio" name="input-name" id="input-id3-two" class="form-check__input" />
        <label class="form-check__label" for="input-id3">
          Latest draft version from the Define Designer
        </label>
      </div>
      <div class="form-error" role="alert">Error message</div>
    </div>
  </div>

Inline medium

Upload with

Aspera

HTTPS

Data Package Type

Disabled off

Disabled on

Error message

Toggle dark mode

<div class="form-group row mx-auto">
    <h3 class="col-sm-3 col-md-2 col-form-label text-base" id="radioGroupHdr">Upload with</h3>
    <div class="col-sm-9 col-md-10" role="group" aria-labelledby="radioGroupHdr">
      <div class="form-check form-check--inline">
        <input checked type="radio" name="input-name" id="input-id1-three" class="form-check__input">
        <label class="form-check__label" for="input-id1-three">
          Aspera
        </label>
        <span class="server-error"></span>
      </div>
      <div class="form-check form-check--inline">
        <input type="radio" name="input-name" id="input-id2-three" class="form-check__input">
        <label class="form-check__label" for="input-id2-three">
          HTTPS
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row mx-auto">
    <h3 class="col-sm-3 col-md-2 col-form-label text-base text-nowrap" id="radiodisableddHdrGroupHdr">Data Package Type</h3>
    <div class="col-sm-9 col-md-10" role="group" aria-labelledby="disableddHdr">
      <div class="form-group" role="group" aria-labelledby="disableddHdr">
        <div class="form-check form-check--inline">
          <input disabled type="radio" name="input-name-disabled" id="input-id-disabled" class="form-check__input">
          <label class="form-check__label" for="input-id-disabled">
            Disabled off
          </label>
        </div>
        <div class="form-check form-check--inline">
          <input disabled checked type="radio" name="input-name-disabled" id="input-id-disabled-selected" class="form-check__input">
          <label class="form-check__label" for="input-id-disabled-selected">
            Disabled on
          </label>
      </div>
      <div class="form-error" role="alert">Error message</div>
    </div>
    </div>
</div>

Inline small

Upload with

Aspera

HTTPS

Data Package Type

Disabled off

Disabled on

Error message

Toggle dark mode

<div class="form-group row mx-auto">
    <h3 class="col-sm-3 col-md-2 col-form-label text-base" id="radioGroupHdr">Upload with</h3>
    <div class="col-sm-9 col-md-10" role="group" aria-labelledby="radioGroupHdr">
      <div class="form-check form-check--sm form-check--inline">
        <input checked type="radio" name="input-name" id="input-id1-four" class="form-check__input">
        <label class="form-check__label" for="input-id1-four">
          Aspera
        </label>
        <span class="server-error"></span>
      </div>
      <div class="form-check form-check--sm form-check--inline">
        <input type="radio" name="input-name" id="input-id2-four" class="form-check__input">
        <label class="form-check__label" for="input-id2-four">
          HTTPS
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row mx-auto">
    <h3 class="col-sm-3 col-md-2 col-form-label text-base text-nowrap" id="radiodisableddHdrGroupHdr">Data Package Type</h3>
    <div class="col-sm-9 col-md-10" role="group" aria-labelledby="disableddHdr">
      <div class="form-group" role="group" aria-labelledby="disableddHdr">
        <div class="form-check form-check--sm form-check--inline">
          <input disabled type="radio" name="input-name-disabled" id="input-id-disabled" class="form-check__input">
          <label class="form-check__label" for="input-id-disabled">
            Disabled off
          </label>
        </div>
        <div class="form-check form-check--sm form-check--inline">
          <input disabled checked type="radio" name="input-name-disabled" id="input-id-disabled-selected" class="form-check__input">
          <label class="form-check__label" for="input-id-disabled-selected">
            Disabled on
          </label>
      </div>
      <div class="form-error" role="alert">Error message</div>
    </div>
  </div>
</div>

Twirl

Symbols prefixed by underscore ("_")

When referencing/naming Symbol with a form input, any argument/option/variable that are endemic to the input itself (i.e. "id", "placeholder", "required") are **not** preceded by an _underscore. In other cases, an _underscore precedes to denote it affects the output of a container/parent element, or a sibling.

app/views/components/formFields/radioInput.scala.html

@standardRadio(myForm(""),
  Symbol("_label") -> "",
  Symbol("id") -> "",
  Symbol("_inline") -> false,
  Symbol("_help") -> "",
  Symbol("_helpLink") ->
  Symbol("disabled") -> false,
  Symbol("checked") -> false,
  Symbol("class") -> "",
  Symbol("_class") -> "",
)

NameTypeDescriptionDefault valueCopy

1. _label
   string
   Text that describes the control. Will be both visible and clickable.
   blank
   Symbol("_label") -> ""Copy to Clipboard
2. id
   string (required)
   adds an id to the input and a for attribute to the associated label label
   blank
   Symbol("id") -> ""Copy to Clipboard
3. _inline
   boolean
   true invokes the inline visual permutation
   false
   Symbol("_inline") -> ""Copy to Clipboard
4. disabled
   boolean
   Sets the field as to appear disabled, users will not be able to interact with the text field.
   false
   Symbol("disabled") -> ""Copy to Clipboard
5. checked
   boolean
   specifies that the input element should be pre-selected (checked) when the page loads.
   false
   Symbol("checked") -> ""Copy to Clipboard
6. class
   string
   adds class="" to the input
   blank
   Symbol("class") -> ""Copy to Clipboard
7. _class
   string
   adds class="" to the container div (.form-check)
   blank
   Symbol("_class") -> ""Copy to Clipboard
8. _help
   string
   outputs additional help or instructional text
   blank
   Symbol("_help") -> ""Copy to Clipboard
9. _helpLink
   html block (no quotes)
   appends a link to help or instructional text
   blank
   Symbol("_helpLink") -> ""Copy to Clipboard

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.

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