RadioButtonGroup

A configurable RadioButtonGroup component used as a container of RadioButton elements.

Import

React

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

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

Angular

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

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

Vue.js

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

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

Code

React

<DhlRadioButtonGroup>
  [dhl-radio-button elements]
</DhlRadioButtonGroup>

Angular

<dhl-radio-button-group>
  [dhl-radio-button elements]
</dhl-radio-button-group>

Vue.js

<dhl-radio-button-group>
  [dhl-radio-button elements]
</dhl-radio-button-group>

Interactive Demo

Readme

Usage

Dhl-radio-button-group

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-group
    label="Radio Button Group"
    name="radio-button-group-1"
  >
    <dhl-radio-button value="value1">Radio 1</dhl-radio-button>
    <dhl-radio-button value="value2">Radio 2</dhl-radio-button>
    <dhl-radio-button value="value3">Radio 3</dhl-radio-button>
  </dhl-radio-button-group>

  <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 form.checkValidity();
  });
</script>

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

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

  <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 form.checkValidity();
  });
</script>

usage with validation (required) and custom validation message

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

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

<script>
  const form = document.querySelector("form");
  const radioButtonGroup = document.querySelector("dhl-radio-button-group");
  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();
    const elementValid = await radioButtonGroup.checkValidity();

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

usage with custom events

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

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

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

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

  radioButtonGroup.addEventListener("dhlChange", async (e) => {
    const isValid = await radioButtonGroup.checkValidity();
    console.log(radioButtonGroup, "isValid", isValid, e.detail.value);
  });
</script>

Properties

Property	Attribute	Description	Type	Default
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-radio-button-group-${getRandomString()}
dataOrientation	data-orientation	An optional prop to determine the layout of the component. It takes any valid value that can be used for the class attribute of an HTMLInputElement.	Orientation.horizontal \| Orientation.vertical	DHL_RADIO_BUTTON_GROUP.ORIENTATION.HORIZONTAL
isDisabled	disabled	An optional flag to define if the component is disabled.	boolean	undefined
label	label	An optional 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	dhl-radio-button-group-${getRandomString()}
required	required	An optional prop to flag the component as required within a form context.	boolean	undefined
validation	--	An optional object to set-up a custom components validation state. Required Fields: type	{ type: 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	""

Events

Event	Description	Type
dhlBlur	Event emitted when the component is focused on.	CustomEvent<{ value: any; }>
dhlChange	Event emitted when the value has changed.	CustomEvent<{ value: any; }>

Methods

checkValidity() => Promise<boolean>

Checks the validity of the input field.

Returns

Type: Promise<boolean>

A promise that resolves to true if the input field is valid, otherwise false.

getValidationMessage() => Promise<string>

Retrieves the validation message for the input field.

Returns

Type: Promise<string>

A promise that resolves to a string representing the validation message.

reportValidity() => Promise<boolean>

Reports the validity of the input field.

Returns

Type: Promise<boolean>

A promise that resolves to a boolean indicating whether the input field is valid.

setValidity() => Promise<void>

Sets the validity state of the input field.

Returns

Type: Promise<void>

A Promise that resolves when the validity state is set.

willValidate() => Promise<boolean>

Returns a promise that resolves to true if the element will successfully validate, or false otherwise.

Returns

Type: Promise<boolean>

A promise that resolves to a boolean value indicating whether the element will validate.

Slots

Slot	Description
"unnamed"	unnamed children slot for text that accompanies the DhlRadioButton

Dependencies

Depends on

• dhl-validation-feedback

Graph

---

Built by DHL User Interface Library Team!