Components

Radio Button

(external link)

ld-radio #

The ld-radio component is meant to be used in radio groups — collections of radio buttons describing a set of related options (i.e. using a fieldset and a legend). Only one radio button in a given group can be selected at the same time.

This component can be used in conjunction with the ld-label and the ld-input-message component.

Examples #

Primary #

<ld-radio name="example-1"></ld-radio>
<ld-radio name="example-1" checked></ld-radio>

<div class="ld-radio">
  <input type="radio" name="example-1-css">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio">
  <input type="radio" name="example-1-css" checked>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<LdRadio name="example-1" />
<LdRadio name="example-1" checked />

Disabled #

<ld-radio name="example-2" disabled></ld-radio>
<ld-radio name="example-2" disabled checked></ld-radio>

<div class="ld-radio">
  <input type="radio" disabled name="example-2-css">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio">
  <input type="radio" disabled name="example-2-css" checked>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<LdRadio name="example-2" disabled />
<LdRadio name="example-2" disabled checked />

If you want the radio button to stay focusable even if it is disabled, use aria-disabled in place of disabled:

<ld-radio name="example-3" aria-disabled="true"></ld-radio>
<ld-radio name="example-3" aria-disabled="true" checked></ld-radio>

<div class="ld-radio">
  <input
    type="radio"
    aria-disabled="true"
    name="example-3-css"
    id="focusable-disabled-radio-1">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio">
  <input
    type="radio"
    aria-disabled="true"
    name="example-3-css"
    checked
    id="focusable-disabled-radio-2">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<!-- Example code for input prevention on aria-disabled radio buttons -->
<script>
  const inputs = document.querySelectorAll('#focusable-disabled-radio-1, #focusable-disabled-radio-2')
  Array.from(inputs).forEach(input => {
    input.addEventListener('click', (ev) => {
      ev.preventDefault()
    })
  })
</script>

<LdRadio name="example-3" aria-disabled="true" />
<LdRadio name="example-3" aria-disabled="true" checked />

When aria-disabled is applied on the radio button, the component will try to prevent user interaction using an internal click event handler, calling preventDefault() on the click event. With the CSS component version on the other hand, you will need to take care of preventing the default behaviour of the radio button yourself.

Dark #

Dark tone radio buttons should only be used on white backgrounds.

<ld-radio name="example-4" tone="dark"></ld-radio>
<ld-radio name="example-4" tone="dark" checked></ld-radio>

<div class="ld-radio ld-radio--dark">
  <input type="radio" name="example-4-css">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio ld-radio--dark">
  <input type="radio" name="example-4-css" checked>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<LdRadio name="example-4" tone="dark" />
<LdRadio name="example-4" tone="dark" checked />

Highlight #

<ld-radio name="example-5" mode="highlight"></ld-radio>
<ld-radio name="example-5" mode="highlight" checked></ld-radio>

<div class="ld-radio ld-radio--highlight">
  <input type="radio" name="example-5-css">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio ld-radio--highlight">
  <input type="radio" name="example-5-css" checked>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<LdRadio name="example-5" mode="highlight" />
<LdRadio name="example-5" mode="highlight" checked />

Invalid #

An invalid state for a radio inputs inside a group makes sense, if for instance a selection is required, but no value is selected.

<ld-radio name="example-6" invalid required></ld-radio>
<ld-radio name="example-6" invalid required></ld-radio>

<div class="ld-radio ld-radio--invalid">
  <input type="radio" name="example-6-css" required>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio ld-radio--invalid">
  <input type="radio" name="example-6-css" required>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<LdRadio name="example-6" invalid required />
<LdRadio name="example-6" invalid required />

Danger #

The radio button in mode "danger" looks and behaves the same as a radio button with the invalid property. The only difference lies in the semantics of the properties, which helps to understand the context when reading the code.

<ld-radio name="example-7" mode="danger"></ld-radio>
<ld-radio name="example-7" mode="danger" checked></ld-radio>

<div class="ld-radio ld-radio--highlight ld-radio--danger">
  <input type="radio" name="example-7-css">
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>
<div class="ld-radio ld-radio--highlight ld-radio--danger">
  <input type="radio" name="example-7-css" checked>
  <div class="ld-radio__dot"></div>
  <div class="ld-radio__box"></div>
</div>

<LdRadio name="example-7" mode="danger" />
<LdRadio name="example-7" mode="danger" checked />

With label #

<ld-label position="right" size="m">
  Orange
  <ld-radio name="example-8" value="orange"></ld-radio>
</ld-label>

<ld-label position="right" size="m">
  Banana
  <ld-radio name="example-8" value="banana"></ld-radio>
</ld-label>

<label class="ld-label ld-label--right ld-label--m">
  Orange
  <div class="ld-radio">
    <input type="radio" name="example-8-css" value="orange">
    <div class="ld-radio__dot"></div>
    <div class="ld-radio__box"></div>
  </div>
</label>

<label class="ld-label ld-label--right ld-label--m">
  Banana
  <div class="ld-radio">
    <input type="radio" name="example-8-css" value="banana">
    <div class="ld-radio__dot"></div>
    <div class="ld-radio__box"></div>
  </div>
</label>

<LdLabel position="right" size="m">
  Orange
  <LdRadio name="example-8" value="orange" />
</LdLabel>

<LdLabel position="right" size="m">
  Banana
  <LdRadio name="example-8" value="banana" />
</LdLabel>

Orange

Banana

Orange

Banana

Please reffer to the ld-label docs for more information on the label component.

With label and input message #

<ld-label position="right" size="m">
  Orange
  <ld-radio name="example-9"></ld-radio>
  <ld-input-message mode="info">You'll join the orange team.</ld-input-message>
</ld-label>

<ld-label position="right" size="m">
  Banana
  <ld-radio name="example-9"></ld-radio>
  <ld-input-message mode="info">You'll join the banana team.</ld-input-message>
</ld-label>

<label class="ld-label ld-label--right ld-label--m">
  Orange
  <div class="ld-radio">
    <input type="radio" name="example-9-css">
    <div class="ld-radio__dot"></div>
    <div class="ld-radio__box"></div>
  </div>
  <span class="ld-input-message">
    <svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
      <ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
    </svg>
    You'll join the orange team.
  </span>
</label>

<label class="ld-label ld-label--right ld-label--m">
  Banana
  <div class="ld-radio">
    <input type="radio" name="example-9-css">
    <div class="ld-radio__dot"></div>
    <div class="ld-radio__box"></div>
  </div>
  <span class="ld-input-message">
    <svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
      <ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
    </svg>
    You'll join the banana team.
  </span>
</label>

<LdLabel position="right" size="m">
  Orange
  <LdRadio name="example-9" />
  <LdInputMessage mode="info">You'll join the orange team.</LdInputMessage>
</LdLabel>

<LdLabel position="right" size="m">
  Banana
  <LdRadio name="example-9" />
  <LdInputMessage mode="info">You'll join the banana team.</LdInputMessage>
</LdLabel>

Orange

You'll join the orange team.

Banana

You'll join the banana team.

Orange

You'll join the orange team. Banana

You'll join the banana team.

Input validation #

The ld-radio Web Component provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for focus, input and blur events.

You can find examples for different kinds of input validation in the Form validation documentation. Please also be aware of differences in event handling compared to native elements that come with Web Components. Details can be found in our Event handling documentation.

Properties #

Property	Attribute	Description	Type	Default
`ariaDisabled`	`aria-disabled`	Alternative disabled state that keeps element focusable	`string`	`undefined`
`autofocus`	`autofocus`	Automatically focus the form control when the page is loaded.	`boolean`	`undefined`
`checked`	`checked`	Indicates whether the radio button is selected.	`boolean`	`false`
`disabled`	`disabled`	Disabled state of the radio.	`boolean`	`undefined`
`form`	`form`	Associates the control with a form element.	`string`	`undefined`
`invalid`	`invalid`	Set this property to `true` in order to mark the radio visually as invalid.	`boolean`	`undefined`
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`ldTabindex`	`ld-tabindex`	Tab index of the input.	`number`	`undefined`
`mode`	`mode`	Display mode.	`"danger" \| "highlight"`	`undefined`
`name` (required)	`name`	Used to specify the name of the control.	`string`	`undefined`
`readonly`	`readonly`	The value is not editable.	`boolean`	`undefined`
`ref`	`ref`	reference to component	`any`	`undefined`
`required`	`required`	Set this property to `true` in order to mark the radio button as required.	`boolean`	`undefined`
`tone`	`tone`	radio tone. Use `'dark'` on white backgrounds. Default is a light tone.	`"dark"`	`undefined`
`value`	`value`	The input value.	`string`	`undefined`

Events #

Event	Description	Type
`ldchange`	Emitted when the input value changed and the element loses focus.	`CustomEvent<boolean>`
`ldinput`	Emitted when the input value changed.	`CustomEvent<boolean>`

Methods #

`focusInner() => Promise<void>` #

Sets focus on the radio button.

Returns #

Type: Promise<void>

Shadow Parts #

Part	Description
`"box"`
`"dot"`
`"input"`	Actual input element
`"root"`

Built with StencilJS

ld-radio #

Examples #

Primary #

Disabled #

Dark #

Highlight #

Invalid #

Danger #

With label #

With label and input message #

Input validation #

Properties #

Events #

Methods #

focusInner() => Promise<void> #

Returns #

Shadow Parts #

`focusInner() => Promise<void>` #