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.

Import

React

// 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"

Angular

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

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

Vue.js

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

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

Code

React

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

Angular

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

Vue.js

<dhl-toggle-control
  :options.prop="[
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' }
  ]"
  default-value="a"
></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	dhl-toggle-control-${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
defaultValue	default-value	An optional prop defining the initial value when the component is uncontrolled.	string	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
isFullWidth	is-full-width	An optional prop that sets the component to 100% width of it's parent container.	boolean	false
options	--	A REQUIRED array describing the toggle options rendered by the component.	DhlToggleControlOption[]	[]
orientation	orientation	An optional orientation for the toggle options.	Orientation.horizontal \| Orientation.vertical	DHL_TOGGLE_CONTROL.ORIENTATION.HORIZONTAL
size	size	An optional size prop for the toggle options.	Sizes.MD \| Sizes.SM \| Sizes.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; }>

Dependencies

Depends on

• dhl-icon

Graph

---

Built by DHL User Interface Library Team!