SelectableCard

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

Import

React
Angular
Vue.js

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

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

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

// 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
Angular
Vue.js

<DhlSelectableCard isChecked={true}>
  <DhlText slot="header">Card Header</DhlText>
  <DhlText>Card content goes here.</DhlText>
</DhlSelectableCard>

<dhl-selectable-card is-checked="true">
  <dhl-text slot="header">Card Header</dhl-text>
  <dhl-text>Card content goes here.</dhl-text>
</dhl-selectable-card>

<dhl-selectable-card :is-checked="true">
  <dhl-text slot="header">Card Header</dhl-text>
  <dhl-text>Card content goes here.</dhl-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`	`change-event`	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`
`handleSelectionChange`	`handle-selection-change`	A REQUIRED handleSelectionChange callback prop to handle selection state of the card when clicked.	`() => void`	`undefined`
`hasOtherActions`	`has-other-actions`	An optional prop defining whether there are other actions in the card, which will not trigger the checkbox	`boolean`	`false`
`highlightState`	`highlight-state`	An optional prop to highlight card state.	`"error" \| "success"`	`undefined`
`isChecked`	`is-checked`	An REQUIRED prop used to describe either a checked or unchecked state of the SelectableCard	`boolean`	`false`
`isDisabled`	`is-disabled`	An optional flag to define if the component is disabled.	`boolean`	`false`
`isRequired`	`is-required`	An optional prop used to toggle if 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`
`selectionVariant`	`selection-variant`	An optional prop to select a component selection design variant.	`"checkbox" \| "checked-positive" \| "radio-button"`	`DHL_SELECTABLE_CARD.SELECTION_VARIANT.CHECKBOX`
`textAlign`	`text-align`	An optional prop to set the text alignment of the card content.	`"center" \| "left"`	`DHL_SELECTABLE_CARD.TEXT_ALIGN.LEFT`
`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
`"image"`	used to supply image elements for display within the DhlSelectableCard
`"unnamed"`	unnamed children slot for DhlSelectableCard content

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Migrating from DUIL 1.0​

Readme​

Properties​

Slots​

Dependencies​

Depends on​

Graph​