A configurable Checkbox
component used to gather user input through a checkbox.
The component can be used in combination with CheckboxGroup .
Import import { DhlCheckbox } from "@dhl-official/react-library"
import { DhlCheckbox } from "@dhl-official/ui-libraries/react-library"
If the DUIL has been installed , you can use the web component directly:
< dhl-checkbox > </ dhl-checkbox >
import { DhlCheckbox } from "@dhl-official/vue-library"
import { DhlCheckbox } from "@dhl-official/ui-libraries/vue-library"
Code < DhlCheckbox > Example Text </ DhlCheckbox >
< dhl-checkbox > Example Text </ dhl-checkbox >
< dhl-checkbox > Example Text </ dhl-checkbox >
Examples Basic Checkbox A Checkbox component with a label
and description
.
< DhlCheckbox variant = " checkbox " label = " Checkbox Label " description = " This is a description for the checkbox. " />
Checkbox with Panel variant A Checkbox component showing checkbox-panel
variant.
< DhlCheckbox variant = " checkbox-panel " label = " Checkbox Label " description = " This is a description for the checkbox. " />
Checkbox with Panel variant, valid state and a right slot A Checkbox with Panel variant showing a panel-right
slot.
< DhlCheckbox variant = " checkbox-panel " label = " Checkbox Label " description = " This is a description for the checkbox. " validation = {{ type: "valid", message: "Shipped successfully" }} checked = {true} > < div slot = " panel-right " > < DhlIcon src = {IlluGogreen} size = " 60px " /> </ div > </ DhlCheckbox >
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20128%20100%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(16%2026)%22%3E%3Cpath%20fill%3D%22url(%23illu-gogreen_svg__a)%22%20fill-rule%3D%22nonzero%22%20d%3D%22M24.4%2053.8%2040.2%2051%2016.5%2039.8%200%2042.9z%22%20opacity%3D%220.3%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23illu-gogreen_svg__b)%22%20fill-rule%3D%22nonzero%22%20d%3D%22m25.8%2053.4%2059.3-10.6L61%2031.6%201.9%2042.5z%22%20opacity%3D%220.2%22%3E%3C%2Fpath%3E%3Cellipse%20cx%3D%2281.915%22%20cy%3D%2235.298%22%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20rx%3D%226.7%22%20ry%3D%226%22%20transform%3D%22rotate(-41.506%2081.915%2035.298)%22%3E%3C%2Fellipse%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22m36.5%2050.6-3-1.5v-3.4h2z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFE373%22%20fill-rule%3D%22nonzero%22%20d%3D%22m76.8%2020.5%2014.1-1.3L77%2012.3c-1.7-.9-3.8-1.2-5.7-1.1l-12.4.3z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23E6A422%22%20fill-rule%3D%22nonzero%22%20d%3D%22M23.5%2014.2v32.5L7.9%2038.9V6.5z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFE373%22%20fill-rule%3D%22nonzero%22%20d%3D%22m59%2012.9%2012.6-2-15.4-7.6c-2.1-1-4.5-1.4-6.8-1l-9%201.5z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FC0%22%20fill-rule%3D%22nonzero%22%20d%3D%22M94%2034.2V22.7c0-1.9-3.1-4.1-5.6-4.1l-5.6.1-9.1-6.9c-2.5-1.9-5.8-2.7-8.9-2.2l-6.1%201.1v29.4l18.9-3.3z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23E6A422%22%20fill-rule%3D%22nonzero%22%20d%3D%22M59.4%2010.7V40l-15.6-4.5V3z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFE373%22%20fill-rule%3D%22nonzero%22%20d%3D%22m23.5%2014.2%2035.1-6.5L43.1%200%207.9%206.5z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%234C4C4C%22%20fill-rule%3D%22nonzero%22%20d%3D%22m62.3%2022.3%2018-3.2-8.6-6.5-10.8%201.9z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%233A3A3A%22%20fill-rule%3D%22nonzero%22%20d%3D%22m70.4%2020.8%209.9-1.7-8.6-6.5-5.3%201-4.1.7z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%2328211E%22%20fill-rule%3D%22nonzero%22%20d%3D%22m75.6%2019.9%204.7-.8-8.6-6.5-5.3%201z%22%3E%3C%2Fpath%3E%3Cellipse%20cx%3D%2236.983%22%20cy%3D%2243.508%22%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20rx%3D%226.7%22%20ry%3D%226%22%20transform%3D%22rotate(-41.506%2036.983%2043.508)%22%3E%3C%2Fellipse%3E%3Cpath%20fill%3D%22%23FC0%22%20fill-rule%3D%22nonzero%22%20d%3D%22M23.5%2014.2v32.5l35.1-6.5V7.7z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%231FC696%22%20fill-rule%3D%22nonzero%22%20d%3D%22M49.8%2029.5c1.8-1.6%203.9-3%206-4.3-1.2-.3-2.4-1-3.5-1.7-.3-.2-.7-.4-1-.6l-2.4-1.2c-.4.3-.9.6-1.2%201-1.4%201.5-2.7%202.7-3.9%203.8%201.5.5%203%201.1%204.3%201.9l1.5.9zm-9.1%203.1c.5.3.9.6%201.4.9.4.2%201.7.9%202.6.4%201.1-.6%202.1-1.6%203-2.5l.6-.6c.3-.2.5-.5.8-.7l-1.5-.9c-1.5-.8-3.1-1.5-4.7-2-2%201.7-3.9%202.8-5.5%203.7.8.2%201.5.5%202.3.9.3.2.6.5%201%20.8%22%3E%3C%2Fpath%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__d)%22%20opacity%3D%220.7%22%20transform%3D%22translate(37%2027)%22%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M4.6%204.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1m4.9-1.3c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.5%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M10.1%204.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1M5%205.8c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.4%201.2.1%201.1m-3.3-.6c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M5.5%207.2c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M6.9%208c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.3.1%201.1m.2-1.5c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M6.9%206c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1m.2-1.4c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.2.1%201.1m-4%202c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M5.1%201.2c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M2%204.1c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1m3-2c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.2-.5%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M6.3%202.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%231FC696%22%20fill-rule%3D%22nonzero%22%20d%3D%22m41.3%2034.9%201.5-.3c-.4-.1-.7-.2-1.1-.4l-1.5-.9c-.4-.2-.7-.5-1.1-.7-1-.6-2-.9-3.1-1.1-3.8%201.6-6%201.2-6%201.2%201.3%201.5%202.9%202.6%204.7%203.4z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%231FC696%22%20fill-rule%3D%22nonzero%22%20d%3D%22M49.6%2036.1c.4-.9.6-1.7.7-2.4.1-1-.3-1.9-.6-2.8-.3.2-.5.5-.8.7l-.6.4c-1.2%201.2-2.4%202.4-4%203-.9.4-1.9.6-2.9.8l-5.2%201c4.4%201.5%209.2%201.3%2012.6.9.3-.5.6-1.1.8-1.6m9-1.7v-9.7l-.6.3q.6%204.8.3%209.6c.2-.1.2-.1.3-.2m0-14c-1.4-.7-3-1-4.8-.7q-2.25.3-4.2%201.5c.7.3%201.3.6%202%201%20.4.2.7.4%201.1.6%201.4.9%202.7%201.8%204.2%201.8.6-.3%201.1-.6%201.7-.9z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%231FC696%22%20fill-rule%3D%22nonzero%22%20d%3D%22M57.4%2035.3q.3-4.95-.3-9.9c-2.4%201.3-4.7%202.9-6.8%204.7.4%201.1.9%202.3.8%203.5-.1%201-.4%202-.8%202.7-.2.4-.3.8-.5%201.2%202-.2%203.2-.5%203.2-.5%201.6-.2%203.1-.8%204.4-1.7%22%3E%3C%2Fpath%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__f)%22%20opacity%3D%220.7%22%20transform%3D%22translate(49%2025)%22%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M2.9%2011.8c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1m4.5-6c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m-5.6%204.6c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M3.9%206.4c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.2-.4%201.3.1%201.1m4-1.4c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M2.6%207.6c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.5%201.3.1%201.1M1.3%206.5c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.4%201.3.1%201.1m5.4%202.9c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.2-.5%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M5.1%207.7c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1M.8%2012.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m3.4-.2c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1M7.8%202.2c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M2.9%209.3c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m1.3%201.6c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M4.7%202.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m2%20.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M3%204.9c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1m3.1%203.4c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__h)%22%20opacity%3D%220.7%22%20transform%3D%22translate(49%2019)%22%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M2.6%203.7c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1m4.7-2.2c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1m.6%202.2c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M6.1%203.6c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.5%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M3.5%205.1c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.2-.5%201.2.1%201.1M.4%203.4c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.5%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M4%201.8c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232DC597%22%20d%3D%22M4.6%202.5c.6-.2%201.1-.3%201.7-.5.4-.1.4-1.2-.1-1.1-.6.2-1.1.3-1.7.5-.4.2-.4%201.2.1%201.1m-.2%203.1c.6-.2%201.1-.3%201.7-.5.4-.1.4-1.2-.1-1.1-.6.2-1.1.3-1.7.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M5.7%205.7c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.1-.5%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M3.1%206.3c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.2-.4%201.2.1%201.1m4.1-.1c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__j)%22%20opacity%3D%220.7%22%20transform%3D%22translate(57%2024)%22%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M1.2%208.7c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.2-.5%201.3.1%201.1M1.8%205c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.5%201.3.1%201.1m-3.2-2c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.5%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M1%203.7c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m.5%203.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__l)%22%20opacity%3D%220.7%22%20transform%3D%22translate(36%2030)%22%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M12.4%204.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.5.2-.4%201.3.1%201.1m-.6-1.1c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1M7.6%208.3c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1m3.8-1.7c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M12.5%207.4c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1m-12-.1c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M11.1%208.6c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1m-6.3-.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1m-.6-1.4c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m5.2-1c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.4%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M3.9%208c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.2.1%201.1m4.9.7c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1M6.7%206.2c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m6.4.1c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1m-3.9.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M1.4%208c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.2.1%201.1m10.1-3.6c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__n)%22%20opacity%3D%220.7%22%20transform%3D%22translate(30%2031)%22%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M4.7%201.9c1-.3%202-.6%202.9-.8C8%201%208-.1%207.5%200c-1%20.3-2%20.6-2.9.8-.5.2-.4%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232DC597%22%20d%3D%22M4%202.8c.6-.2%201.1-.3%201.7-.5.4-.1.4-1.2-.1-1.1-.6.2-1.1.3-1.7.5-.4.2-.3%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M1.9%204.3c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1m-.3-1.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1m8.9%202.2c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.3.1%201.1M5.4%203.5c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.5.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M8.7%204.2c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.2-.5%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M5.5%205.2c.8-.2%201.7-.5%202.5-.7.6-.2.5-1.2-.1-1.1-.8.2-1.7.5-2.5.7-.6.2-.5%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M6.8%204.3c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.3.1%201.1m-2.9.8c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M3.8%204.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M2.7%203.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1m6.6-.8c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill-rule%3D%22nonzero%22%20mask%3D%22url(%23illu-gogreen_svg__p)%22%20opacity%3D%220.7%22%20transform%3D%22translate(43%2021)%22%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M3.8%207.9c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.2-.4%201.2.1%201.1m3.8-.4c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.3%201.2.1%201.1m1.7-3.6c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.5.1-.4%201.2.1%201.1M4.6%205.2c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.2-.4%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M1.6%206.8c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.1-.4%201.2.1%201.1m7.5-1.1c1-.3%202-.6%202.9-.8.4-.1.4-1.2-.1-1.1-1%20.3-2%20.6-2.9.8-.4.2-.3%201.3.1%201.1m-3.9-3c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m-.1%201.4c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23167551%22%20d%3D%22M3.1%203.6c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232DC597%22%20d%3D%22M6.1%203.2c.6-.2%201.1-.3%201.7-.5.4-.1.4-1.2-.1-1.1-.6.2-1.1.3-1.7.5-.4.2-.4%201.3.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M3%205.1c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20d%3D%22M.6%206.4c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1m6.6-.5c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1M6%208.8c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.4%201.2.1%201.1M6.4%204c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.3.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%232DC597%22%20fill-rule%3D%22nonzero%22%20d%3D%22M46.8%2026.1c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.4.1-.3%201.1.1%201m6.6%205.5c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.3.2-.3%201.1.1%201m1.8%201c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.3.1-.3%201.1.1%201M53.8%2036c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.4.2-.3%201.2.1%201m-7.7%200c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.4.2-.3%201.2.1%201m-10.8%200c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.4.1-.3%201.1.1%201m-2.4-.6c.5-.1%201-.3%201.5-.4.4-.1.3-1.1-.1-1-.5.1-1%20.3-1.5.4-.4.1-.3%201.1.1%201%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%2328211E%22%20fill-rule%3D%22nonzero%22%20d%3D%22M63%2025.8v.4l2.6-.5c0-.6-.6-1.1-1.2-1l-.7.1c-.3.2-.7.6-.7%201%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%233A3A3A%22%20fill-rule%3D%22nonzero%22%20d%3D%22M23.5%2041.4v6.9L94%2035.4v-6.9z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22m81.3%2042.3-3-1.5v-3.4l2%20.1z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M76.8%2038.6c-.4-4.2%202.8-8.3%206.9-9.1%204.2-.8%207.8%202%208.2%206.2%22%3E%3C%2Fpath%3E%3Cellipse%20cx%3D%2284.52%22%20cy%3D%2236.605%22%20fill%3D%22%2328211E%22%20fill-rule%3D%22nonzero%22%20rx%3D%226.7%22%20ry%3D%226%22%20transform%3D%22rotate(-41.506%2084.52%2036.605)%22%3E%3C%2Fellipse%3E%3Cellipse%20cx%3D%2284.52%22%20cy%3D%2236.605%22%20fill%3D%22%233A3A3A%22%20fill-rule%3D%22nonzero%22%20rx%3D%224%22%20ry%3D%223.6%22%20transform%3D%22rotate(-41.506%2084.52%2036.605)%22%3E%3C%2Fellipse%3E%3Cellipse%20cx%3D%2284.52%22%20cy%3D%2236.605%22%20fill%3D%22%234C4C4C%22%20fill-rule%3D%22nonzero%22%20rx%3D%221.8%22%20ry%3D%221.7%22%20transform%3D%22rotate(-41.506%2084.52%2036.605)%22%3E%3C%2Fellipse%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M31.9%2046.8c-.4-4.2%202.8-8.3%206.9-9.1%204.2-.8%207.8%202%208.2%206.2%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%2328211E%22%20fill-rule%3D%22nonzero%22%20d%3D%22M23.5%2041.4v6.9L7.9%2040.6v-6.9z%22%3E%3C%2Fpath%3E%3Cellipse%20cx%3D%2239.587%22%20cy%3D%2244.815%22%20fill%3D%22%2328211E%22%20fill-rule%3D%22nonzero%22%20rx%3D%226.7%22%20ry%3D%226%22%20transform%3D%22rotate(-41.506%2039.587%2044.815)%22%3E%3C%2Fellipse%3E%3Cellipse%20cx%3D%2239.587%22%20cy%3D%2244.815%22%20fill%3D%22%233A3A3A%22%20fill-rule%3D%22nonzero%22%20rx%3D%224%22%20ry%3D%223.6%22%20transform%3D%22rotate(-41.506%2039.587%2044.815)%22%3E%3C%2Fellipse%3E%3Cellipse%20cx%3D%2239.587%22%20cy%3D%2244.815%22%20fill%3D%22%234C4C4C%22%20fill-rule%3D%22nonzero%22%20rx%3D%221.8%22%20ry%3D%221.7%22%20transform%3D%22rotate(-41.506%2039.587%2044.815)%22%3E%3C%2Fellipse%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M26%2019.49v.186l2.348-.438.136-.21zm0-.343v.185l2.6-.485.136-.21zm0%20.688v.183l2.096-.39.135-.21zm16.027-3.332-.136.21%202.474-.46v-.186zm-.252.391-.135.21%202.725-.509v-.184zm.504-.781-.135.21%202.221-.414v-.185zM28.405%2019.57l1.18-1.826%201.461-.273c.162-.03.16.032.081.155l-.298.462c-.042.064-.117.18.132.135l1.96-.366c-.164.255-.693%201-1.642%201.177zm6.75-2.13-.639.99-1.686.315.64-.99zm2.438-.454-.64.99-1.685.315.64-.99zm.548-.102-.183.284c-.211.326-.024.626.666.497l2.707-.504.64-.99z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m29.23%2016.811-.587.91%203.198-.597c.161-.03.16.032.08.154-.08.124-.214.339-.296.465-.041.064-.116.18.132.134l1.308-.244.387-.6c.24-.373.021-1.013-.838-.853zm8.508-.049-4.124.768%201.128-1.746%201.685-.314-.646%201.001.752-.14.647-1.002%201.685-.314z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.032.265%201.905%202.01.12%202.344%201.247.597z%22%20mask%3D%22url(%23illu-gogreen_svg__r)%22%20transform%3D%22translate(38.167%2014.315)%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%2328211E%22%20fill-rule%3D%22nonzero%22%20d%3D%22M59.4%2034.8v6.9l-.8.2v-7.6z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M69.5%2026.8v-.4l9.3-1.7v.4zm0%201.6v-.3l4.4-.9v.4z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%232DC597%22%20fill-rule%3D%22nonzero%22%20d%3D%22M42.2%2030.6c.6-.2%201.1-.3%201.7-.5.4-.1.4-1.2-.1-1.1-.6.2-1.1.3-1.7.5-.4.2-.3%201.2.1%201.1%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23219D71%22%20fill-rule%3D%22nonzero%22%20d%3D%22M38.6%2030.9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.3%201.2.1%201.1m-7.2%203.7c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.1-.3%201.2.1%201.1m14.4-9c.6-.2%201.3-.4%201.9-.5.4-.1.4-1.2-.1-1.1-.6.2-1.3.4-1.9.5-.4.2-.4%201.2.1%201.1%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E
Shipped successfully
Checkbox with Panel variant, invalid state and a right slot A Checkbox with Panel variant showing a panel-right
slot.
< DhlCheckbox variant = " checkbox-panel " label = " Checkbox Label " description = " This is a description for the checkbox. " validation = {{ type: "invalid", message: "Package delivery error" }} checked = {true} > < div slot = " panel-right " > < DhlIcon src = {IlluMovingBox} size = " 60px " /> </ div > </ DhlCheckbox >
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2090%2062%22%3E%3Cstyle%3E.illu-moving-box_svg__moving-box_svg__st5%7Bopacity%3A.4%3Bfill%3A%23aa7b33%3Benable-background%3Anew%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22url(%23illu-moving-box_svg__moving-box_svg__SVGID_1_)%22%20d%3D%22M28.7%2058.7%2043.2%2056%2019.3%2044.3%205%2046.9z%22%20opacity%3D%220.5%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23fdde84%22%20d%3D%22M43.2%2024.8%2085%2017.4%2061.2%205.8l-41.9%207.4z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m32.9%2019.9%2041.8-7.4-3.9-2-41.9%207.4z%22%20class%3D%22illu-moving-box_svg__moving-box_svg__st5%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23c39000%22%20d%3D%22M43.2%2024.8V56L19.3%2044.3V13.2z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M33%2019.9v7.9l-4-1.9v-8z%22%20class%3D%22illu-moving-box_svg__moving-box_svg__st5%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23fcce09%22%20d%3D%22M43.2%2024.8V56L85%2048.6V17.4z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M55.4%2034.2v14l24.5-4.4V29.9z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M69.6%2043c1.4-.2%202.8-.5%204.3-.7V34c-1.4.2-2.8.5-4.3.7zm-11.9%202c1.3-.2%202.5-.5%203.6-.6v-8.3c-1.3.2-2.5.5-3.6.6zm7.6-1.3%201.8-.3v-8.3l-1.8.3zm12.2-10.4c-.6.1-1.2.2-1.9.3v8.3c.6-.1%201.2-.2%201.9-.3zM63.3%2044.1c.2%200%20.5-.1.7-.1v-8.3c-.2%200-.5.1-.7.1z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E
Package delivery error
Checkbox with Panel variant, a right and bottom slot A Checkbox with Panel variant showing a panel-right
and a panel-bottom
slot.
< DhlCheckbox variant = " checkbox-panel " label = " Checkbox Label " description = " This is a description for the checkbox. " hasOtherActions = {true} > < div slot = " panel-right " > < DhlStatusBadge variant = " pill " label = " Status " status = " info " showDropdownIcon = {false} > </ DhlStatusBadge > </ div > < div slot = " panel-bottom " > < DhlInputField variant = {{ label: 'Label', placeholder: 'Placeholder', }} > </ DhlInputField > </ div > </ DhlCheckbox >
Interactive Demo Migrating from DUIL 1.0 Rename onChange
to changeEvent
Rename disabled
to isDisabled
Add formnovalidate
Readme Usage Dhl-checkbox 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-checkbox name = " checkbox-1 " value = " value1 " > Checkbox 1 </ dhl-checkbox > < dhl-checkbox name = " checkbox-2 " value = " value2 " > Checkbox 2 </ dhl-checkbox > < dhl-checkbox name = " checkbox-3 " value = " value3 " > Checkbox 3 </ dhl-checkbox > < hr /> < dhl-button type = " reset " variant = " outline " > reset </ dhl-button > < dhl-button type = " submit " > submit </ dhl-button > </ form > < script > 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-checkbox name = " checkbox-1 " value = " value1 " required > Checkbox 1 </ dhl-checkbox > < dhl-checkbox name = " checkbox-2 " value = " value2 " required = " true " > Checkbox 2 </ dhl-checkbox > < dhl-checkbox name = " checkbox-3 " value = " value3 " required = " false " > Checkbox 3 </ dhl-checkbox > < hr /> < dhl-button type = " reset " variant = " outline " > reset </ dhl-button > < dhl-button type = " submit " > submit </ dhl-button > </ form > < script > 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-checkbox name = " checkbox-1 " value = " value1 " required > Checkbox 1 </ dhl-checkbox > < dhl-checkbox name = " checkbox-2 " value = " value2 " required = " true " > Checkbox 2 </ dhl-checkbox > < dhl-checkbox name = " checkbox-3 " value = " value3 " required = " false " > Checkbox 3 </ dhl-checkbox > < hr /> < dhl-button type = " reset " variant = " outline " > reset </ dhl-button > < dhl-button type = " submit " > submit </ dhl-button > </ form > < script > const form = document . querySelector ( "form" ) ; const checkboxes = document . querySelectorAll ( "dhl-checkbox" ) ; const validationMessageInvalid = "This field is required" ; const validationMessageValid = "This field is valid" ; form . addEventListener ( "submit" , async ( e ) => { e . preventDefault ( ) ; const isValid = await e . target . checkValidity ( ) ; checkboxes . forEach ( async ( checkbox ) => { const elementValid = await checkbox . checkValidity ( ) ; checkbox . validation = { type : elementValid ? Variants . valid : Variants . invalid , message : elementValid ? validationMessageValid : validationMessageInvalid , } ; } ) ; return isValid ; } ) ; </ script >
usage with custom events < form novalidate > < dhl-checkbox name = " checkbox-1 " value = " value1 " required > Checkbox 1 </ dhl-checkbox > < dhl-checkbox name = " checkbox-2 " value = " value2 " required = " true " > Checkbox 2 </ dhl-checkbox > < dhl-checkbox name = " checkbox-3 " value = " value3 " required = " false " > Checkbox 3 </ dhl-checkbox > < hr /> < dhl-button type = " reset " variant = " outline " > reset </ dhl-button > < dhl-button type = " submit " > submit </ dhl-button > </ form > < script > const form = document . querySelector ( "form" ) ; const checkboxes = document . querySelectorAll ( "dhl-checkbox" ) ; checkboxes . forEach ( ( checkbox ) => { checkbox . addEventListener ( "dhlChange" , async ( e ) => { const isValid = await e . target . checkValidity ( ) ; console . log ( e . target , "is valid:" , isValid ) ; return isValid ; } ) ; } ) ; </ script >
Properties Property Attribute Description Type Default changeEvent
-- [DEPRECATED] Use dhlChange
event instead. An optional onChange callback handler.(event: MouseEvent) => void
undefined
checked
checked
An optional prop used to describe either a checked or unchecked state of the component. boolean
false
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
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-checkbox-${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
description
description
An optional prop to set the description for the component. string
undefined
formNoValidate
form-no-validate
An optional prop used to set native formnovalidate attribute. This bypasses form control validation for form submission for the types image and submit. boolean
undefined
hasOtherActions
has-other-actions
An optional prop defining whether there are other actions in the panel. If true, click event on the panel will not toggle the checkbox. Only works if variant prop is set to DHL_CHECKBOX.VARIANT.CHECKBOX_PANEL. boolean
false
isDisabled
is-disabled
An optional flag to define if the component is disabled. boolean
undefined
label
label
An optional prop to set the 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
undefined
renderLabelAsDiv
render-label-as-div
An optional prop used to prevent a11y multiple label warning, setting renderLabelAsDiv to true presents the inner label as a "div" as opposed to a "label". Ensure that if set true, another label is used for the component - or the ariaLabel/ariaDescribedby prop is used. boolean
undefined
required
required
An optional prop to flag the component as required within a form context. boolean
undefined
size
size
An optional size prop for the component. Sizes.MD \| Sizes.SM
DHL_CHECKBOX.SIZE.MD
validation
-- An optional object to set-up a custom components validation state. Required Fields: message
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
undefined
variant
variant
An optional prop to set the variant of the component. "checkbox" \| "checkbox-panel"
DHL_CHECKBOX.VARIANT.CHECKBOX
Events Event Description Type dhlBlur
Event emitted when the component loses focus. CustomEvent<FocusEvent>
dhlChange
Event emitted when the component changes value. CustomEvent<{ value: string; }>
dhlClick
Event emitted when the component is clicked on. CustomEvent<MouseEvent>
dhlFocus
Event emitted when the component receives focus. CustomEvent<FocusEvent>
Methods checkValidity() => Promise<boolean>
Checks the validity of the component.
Returns Type: Promise<boolean>
A promise that resolves to true if the
component is valid, otherwise false.
Retrieves the component asynchronously.
Returns Type: Promise<HTMLInputElement>
A promise that resolves to the
component.
getValidationMessage() => Promise<string>
Retrieves the validation message for the component.
Returns Type: Promise<string>
A promise that resolves to a string representing the validation
message.
reportValidity() => Promise<boolean>
Reports the validity of the component.
Returns Type: Promise<boolean>
A promise that resolves to a boolean indicating whether the
component is valid.
setValidity(validity: ValidityState, validationMessage?: string) => Promise<void>
Sets the validity state of the component.
Parameters Name Type Description validity
ValidityState
- The validity state to set. validationMessage
string
- An optional validation message to set.
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 "panel-bottom"
used for elements intended to be positioned as the bottom of the DhlCheckbox panel variant. "panel-right"
used for elements intended to be positioned as the right side of the DhlCheckbox panel variant.
Dependencies Used by Depends on Graph
dhl-checkbox
dhl-icon-wrapper
dhl-icon
dhl-required-indicator
dhl-validation-feedback
dhl-validation-feedback-icon
dhl-validation-message
dhl-selectable-card
dhl-table
Built by DHL User Interface Library Team!