ToggleControl

The ToggleControl component lets users select one option from a short list of choices. It can optionally show icons, allow clearing the selection, or stack vertically when space is restricted.

When neither value nor defaultValue is set, the first option is selected by default (unless allowEmpty is true).
Truncated labels show a tooltip with the full text on hover.
Set orientation="auto" to keep equal-width options horizontal when their complete labels fit and stack them vertically when space is restricted. The layout is recalculated after container resizes and font loading.

Import

React
Angular
Vue.js

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

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

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

<duil310-dhl-toggle-control></duil310-dhl-toggle-control>

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

<duil310-dhl-toggle-control></duil310-dhl-toggle-control>

Code

React
Angular
Vue.js

<DhlToggleControl
  options={[
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
    { label: "Option C", value: "c" },
  ]}
  defaultValue="a"
></DhlToggleControl>

<duil310-dhl-toggle-control
  [options]="[
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' }
  ]"
  default-value="a"
></duil310-dhl-toggle-control>

<duil310-dhl-toggle-control
  :options.prop="[
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' }
  ]"
  default-value="a"
></duil310-dhl-toggle-control>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
`allowEmpty`	`allow-empty`	An optional flag that allows users to clear the current selection by reselecting the active option.	`boolean`	`false`
`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`	`duil310-dhl-toggle-control-${getRandomString()}`
`dataMaskPii`	`data-mask-pii`	An optional prop to mask sensitive data in session-replay tools. When `true`, sets `data-di-mask` on the inner element.	`boolean`	`undefined`
`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`
`defaultValue`	`default-value`	An optional prop defining the initial value when the component is uncontrolled.	`string`	`undefined`
`inverted`	`inverted`	An optional flag to invert the selected item's background color. Only available with Brand Refresh UI enabled.	`boolean`	`false`
`isDisabled`	`is-disabled`	An optional flag to define if the component is disabled.	`boolean`	`false`
`isFullWidth`	`is-full-width`	[DEPRECATED] The component now always fills its container. Control width by wrapping in a parent element (e.g. a div with max-width or width). This prop is ignored. An optional prop that sets the component to 100% width of it's parent container.	`boolean`	`false`
`options`	`options`	A REQUIRED array describing the toggle options rendered by the component.	`DhlToggleControlOption[]`	`[]`
`orientation`	`orientation`	An optional orientation for the toggle options. Use `auto` to render horizontally when every equal-width option fits, otherwise vertically.	`"auto" \| "horizontal" \| "vertical"`	`DHL_TOGGLE_CONTROL.ORIENTATION.HORIZONTAL`
`size`	`size`	An optional size prop for the toggle options.	`"md" \| "sm" \| "xs"`	`DHL_TOGGLE_CONTROL.SIZE.MD`
`value`	`value`	An optional prop defining the selected value. If unset, the component can operate in an uncontrolled manner using `defaultValue`.	`string`	`undefined`

Events

Event	Description	Type
`dhlBlur`	Event emitted when one of the toggle options loses focus.	`CustomEvent<{ value: string; }>`
`dhlChange`	Event emitted when the selected option changes.	`CustomEvent<{ value: string; }>`
`dhlFocus`	Event emitted when one of the toggle options receives focus.	`CustomEvent<{ value: string; }>`

ToggleControl

Import

Code

Interactive Demo

Readme

Properties

Events

Dependencies

Depends on

Graph

Import

Code​

Interactive Demo​

Readme​

Properties​

Events​

Dependencies​

Depends on​

Graph​

Code

Interactive Demo

Readme

Properties

Events

Dependencies

Depends on

Graph