RadioButton

A configurable RadioButton component used to gather user input where only one choice can be selected from a series of options.

Import

React
Angular
Vue.js

// with @dhl-official/react-library:
import { DhlRadioButton } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlRadioButton } from "@dhl-official/ui-libraries/react-library"

If the DUIL has been installed, you can use the web component directly:

<dhl-radio-button></dhl-radio-button>

// with @dhl-official/vue-library:
import { DhlRadioButton } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlRadioButton } from "@dhl-official/ui-libraries/vue-library"

Code

React
Angular
Vue.js

<DhlRadioButton>Example Text</DhlRadioButton>

<dhl-radio-button>Example Text</dhl-radio-button>

<dhl-radio-button>Example Text</dhl-radio-button>

Examples

Example 1

RadioButton component with a label and description.

Code example

<DhlRadioButton
  variant="radio-button"
  label="RadioButton Label"
  description="This is a description for the RadioButton."
/>

Example 2

RadioButton component showing radio-button-panel variant.

Code example

<DhlRadioButton
  variant="radio-button-panel"
  label="RadioButton Label"
  description="This is a description for the RadioButton."
/>

Example 3

RadioButton with Panel variant showing a panel-right and a panel-bottom slot.

Code example

<DhlRadioButton
  variant="radio-button-panel"
  label="RadioButton Label"
  description="This is a description for the RadioButton."
>
  <div slot="panel-right">
    <DhlIcon
      src={IlluGogreen}
      size="60px"
    />
  </div>
  <div slot="panel-bottom">
    <DhlStatusBadge variant="pill" label="Status" status="success" showDropdownIcon style={{display: "block", width: "fit-content"}}></DhlStatusBadge>
  </div>
</DhlRadioButton>

Example 4

RadioButton with Panel variant and a valid state.

Code example

<DhlRadioButton
  variant="radio-button-panel"
  label="RadioButton Label"
  description="This is a description for the RadioButton."
  validation={{ type: "valid", message: "Shipped successfully" }}
/>

Example 5

RadioButton with Panel variant and an invalid state.

Code example

<DhlRadioButton
  variant="radio-button-panel"
  label="RadioButton Label"
  description="This is a description for the RadioButton."
  validation={{ type: "invalid", message: "Package delivery error" }}
  checked={true}
/>

Interactive Demo

Migrating from DUIL 1.0

Rename onChange to changeEvent
Rename disabled to isDisabled
Add formnovalidate

Readme

Usage

Dhl-radio-button

Snippets of code in HTML and JavaScript to show some of the use cases for the component. The code is not meant to be executed, but to be used as a reference for the usage of the component.
Angular, React and Vue usages are not included in this documentation, but can be easily derived from the HTML and JavaScript code.

default usage

<form novalidate>
  <dhl-radio-button
    name="dhl-radio-button"
    value="value1"
    >Radio Button 1</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value2"
    >Radio Button 2</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value3"
    >Radio Button 3</dhl-radio-button
  >

  <hr />

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<script type="module">
  const form = document.querySelector("form");
  form.addEventListener("submit", async (e) => await e.target.checkValidity());
</script>

usage with validation (required) and (browser) default validation message

<form novalidate>
  <dhl-radio-button
    name="dhl-radio-button"
    value="value1"
    required
    >Radio Button 1</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value2"
    >Radio Button 2</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value3"
    >Radio Button 3</dhl-radio-button
  >

  <hr />

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<script type="module">
  const form = document.querySelector("form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log(Object.fromEntries(new FormData(form)));
    return await e.target.checkValidity();
  });
</script>

usage with validation (required) and custom validation message

<form novalidate>
  <dhl-radio-button
    name="dhl-radio-button"
    value="value1"
    required
    >Radio Button 1</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value2"
    >Radio Button 2</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value3"
    >Radio Button 3</dhl-radio-button
  >

  <hr />

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<script>
  const form = document.querySelector("form");
  const radioButtons = document.querySelectorAll("dhl-radio-button");
  const validationMessageInvalid = "This field is invalid";
  const validationMessageValid = "This field is valid";

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const isValid = await e.target.checkValidity();
    radioButtons.forEach(async (radioButton) => {
      const elementValid = await radioButton.checkValidity();

      radioButton.validation = {
        type: elementValid ? Variants.valid : Variants.invalid,
        message: elementValid
          ? validationMessageValid
          : validationMessageInvalid,
      };
    });
    return isValid;
  });
</script>

usage with custom events

<form novalidate>
  <dhl-radio-button
    name="dhl-radio-button"
    value="value1"
    required
    >Radio Button 1</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value2"
    >Radio Button 2</dhl-radio-button
  >
  <dhl-radio-button
    name="dhl-radio-button"
    value="value3"
    >Radio Button 3</dhl-radio-button
  >

  <hr />

  <dhl-button
    type="reset"
    variant="outline"
    >reset</dhl-button
  >
  <dhl-button type="submit">submit</dhl-button>
</form>

<script>
  const form = document.querySelector("form");
  const radioButtons = document.querySelectorAll("dhl-radio-button");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log(Object.fromEntries(new FormData(form)));
    return await e.target.checkValidity();
  });

  radioButtons.forEach((radioButton) => {
    radioButton.addEventListener("dhlChange", async (e) => {
      const isValid = await radioButton.checkValidity();
      console.log(radioButton, "isValid", isValid);
      return isValid;
    });
  });
</script>

Properties

Property	Attribute	Description	Type	Default
`changeEvent`	--	[DEPRECATED] Use `dhlChange` event instead. An optional onChange callback handler.	`(event: MouseEvent) => void`	`undefined`
`checked`	`checked`	An optional prop used to describe either a toggled or un-toggled state of the component.	`boolean`	`null`
`dataAriaDescribedby`	`data-aria-describedby`	An optional prop defining the list of reference IDs (separated by spaces), recommended when you want to an error message on your field.	`string`	`undefined`
`dataAriaInvalid`	`data-aria-invalid`	An optional prop used to indicate that the form value of the component does not conform to the expected format.	`string`	`undefined`
`dataAriaLabel`	`data-aria-label`	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	`string`	`undefined`
`dataClassName`	`data-class-name`	An optional class name prop for the component.	`string`	`undefined`
`dataId`	`id`	An optional prop. Gives a valid HTML ID attribute value for the component.	`string`	`dhl-radio-button-${getRandomString()}`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`dataTracking`	`data-tracking`	An optional data tracking prop for the component.	`string`	`undefined`
`description`	`description`	An optional prop to set the description for the component.	`string`	`undefined`
`formNoValidate`	`form-no-validate`	An optional prop used to set native formnovalidate attribute. This bypasses form control validation for form submission for the types image and submit.	`boolean`	`undefined`
`hasOtherActions`	`has-other-actions`	An optional prop defining whether there are other actions in the panel. If true, click event on the panel will not toggle the radiobutton. Only works if variant prop is set to DHL_RADIO_BUTTON.VARIANT.RADIO_BUTTON_PANEL.	`boolean`	`false`
`isDisabled`	`is-disabled`	An optional flag to define if the component is disabled.	`boolean`	`undefined`
`label`	`label`	An optional prop to set the label for the component.	`string`	`undefined`
`name`	`name`	An optional value to be set to the element HTML name attribute. It takes any valid value that can be used for the name attribute of an HTMLInputElement.	`string`	`undefined`
`renderLabelAsDiv`	`render-label-as-div`	An optional prop used to prevent a11y multiple label warning, setting renderLabelAsDiv to true presents the inner label as a "div" as opposed to a "label". Ensure that if set true, another label is used for the component - or the ariaLabel/ariaDescribedby prop is used.	`boolean`	`undefined`
`required`	`required`	An optional prop to flag the component as required within a form context.	`boolean`	`undefined`
`size`	`size`	An optional size prop for the component.	`Sizes.MD \\| Sizes.SM`	`DHL_RADIO_BUTTON.SIZE.MD`
`validation`	--	An optional object to set-up a custom components validation state. Required Fields: `type`	`{ type: Variants.warning \\| Variants.valid \\| Variants.invalid \\| Variants.note; message?: string; }`	`undefined`
`value`	`value`	An optional prop defining the value of the component which is taken when a form is submitted.	`string`	`undefined`
`variant`	`variant`	An optional prop to set the variant of the component.	`"radio-button" \\| "radio-button-panel"`	`DHL_RADIO_BUTTON.VARIANT.RADIO_BUTTON`

Slots

Slot	Description
`"panel-bottom"`	used for elements intended to be positioned as the bottom of the DhlRadioButton panel variant
`"panel-right"`	used for elements intended to be positioned as the right side of the DhlRadioButton panel variant

Dependencies

Used by

dhl-selectable-card

Depends on

dhl-selection-control

Graph

Built by DHL User Interface Library Team!

Import

Code​

Examples​

Example 1​

Example 2​

Example 3​

Example 4​

Example 5​

Interactive Demo​

Migrating from DUIL 1.0​

Readme​

Usage​

Dhl-radio-button​

default usage​

usage with validation (required) and (browser) default validation message​

usage with validation (required) and custom validation message​

usage with custom events​

Properties​

Slots​

Dependencies​

Used by​

Depends on​

Graph​

Code

Examples

Example 1

Example 2

Example 3

Example 4

Example 5

Interactive Demo

Migrating from DUIL 1.0

Readme

Usage

Dhl-radio-button

default usage

usage with validation (required) and (browser) default validation message

usage with validation (required) and custom validation message

usage with custom events

Properties

Slots

Dependencies

Used by

Depends on

Graph