Keyboard<mds-keyboard>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
testenumShows the keyboard key combination test result
trytrybooleanSets if the keyboard key combination test is enabled
Overview
The <mds-keyboard> web component renders a keyboard shortcut as a row of physical-looking keycaps, acting as the compound parent for one or more slotted <mds-keyboard-key> children. It has no direct HTML equivalent; it visualizes a key combination (e.g. Ctrl + C) and can optionally let the user verify that combination by typing it.
Semantic Behavior
Default slot is the key sequence: The component projects slotted <mds-keyboard-key> elements and automatically inserts a + separator between consecutive keys.Compound parent: It reads each child key’s name to build the expected combination; during a test the children are toggled to their pressed state.Test mode (try): When enabled the component appends a trigger button and a tooltip; clicking the button captures keystrokes and, at the first key release, compares the typed combination against the slotted keys, in slot order.Result feedback: A pass shows a “done” icon, a fail shows a “close” icon, and the tooltip surfaces the localized success or error message; the outcome is also reflected on the host via the test attribute.Localization: Trigger label, tooltip copy, and error messages resolve through the locale system (el/en/es/it).
Properties & Visual Configurations
This component does not use the shared variant / tone ladders from agents/variants.md.
Other behavioral props
try opts the keyboard into interactive verification mode. Enable it only when you want the user to be able to confirm a shortcut by typing it; leave it unset for a purely presentational shortcut display.test reflects the verification outcome ('pass' / 'fail') onto the host. It is primarily driven by the test flow and is mainly useful as a styling/state hook rather than a value you set yourself.