SelectableCard

The SelectableCard is an interactive component used to display information that leads end-consumers to a choice or selection.

Import

React

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

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

Angular

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

<dhl-selectable-card></dhl-selectable-card>

Vue.js

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

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

Code

React

<DhlSelectableCard isChecked={true}>Example Text</DhlSelectableCard>

Angular

<dhl-selectable-card isChecked="true">Example Text</dhl-selectable-card>

Vue.js

<dhl-selectable-card :isChecked.prop="true">Example Text</dhl-selectable-card>

Interactive Demo

Migrating from DUIL 1.0

• Rename onChange to changeEvent
• RemoveisFullBleed
• Remove isBlock
• Add formnovalidate

Readme

Properties

Property	Attribute	Description	Type	Default
changeEvent	--	An optional onChange callback handler - see the Example use-case section for implementation example.	(event: Event) => void	undefined
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
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-selectable-card-${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
focusVariant	focus-variant	An optional focusVariant prop for the Card component. Sets color of focus.	"primary" \| "secondary"	DHL_SELECTABLE_CARD.FOCUS_VARIANT.SECONDARY
hasOtherActions	has-other-actions	An optional prop defining whether there are other actions in the card, which will not trigger the checkbox	boolean	false
isChecked	is-checked	An optional prop used to describe either a checked or unchecked state of the SelectableCard	boolean	false
isRequired	is-required	An optional prop used to toggle if the the component is required.	boolean	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
value	value	An optional prop defining the value of the component which is taken when a form is submitted.	string	undefined

Slots

Slot	Description
"footer"	used for elements intended to be positioned as the DhlSelectableCard footer
"header"	used for elements intended to be positioned as the DhlSelectableCard header
"unnamed"	unnamed children slot for DhlSelectableCard content

Dependencies

Depends on

• dhl-card
• dhl-checkbox

Graph

---

Built by DHL User Interface Library Team!