Keycaps that describe a keyboard shortcut in platform notation, without registering it.
<tp-kbd>
Kbd
Default density
Compact density
Restart from the initial state
Show the copyable source
Press
K
to search commands and files.
Press
K
to search commands and files.
<p style="margin:0">
Press
<tp-kbd-group separator="none">
<tp-kbd value="mod"></tp-kbd>
<tp-kbd>K</tp-kbd>
</tp-kbd-group>
to search commands and files.
</p>
Usage
A Kbd only describes a shortcut; your application implements it. Compose one tp-kbd per key inside a tp-kbd-group, which owns spacing and separators.
Generated notation
value renders platform notation and a readable accessible name. mod is Command on macOS and Ctrl elsewhere; platform pins a platform, otherwise it is detected.
Modifiers
Default density
Compact density
Restart from the initial state
Show the copyable source
Place a hint inside a Button’s icon-end slot, an Input group addon or a Tooltip. The owning control keeps focus and activation; the hint stays informative.
Nested keys automatically use the tooltip palette.
Button and tooltip
Default density
Compact density
Restart from the initial state
Show the copyable source
In an Input group, put the shortcut in an addon slot such as inline-end; the group lays out the addon and the Kbd group spaces the keys.
Input group
Default density
Compact density
Restart from the initial state
Show the copyable source
P
P
<tp-input-group style="max-inline-size:22rem;margin-inline:auto;inline-size:100%">
<tp-input label="Search" type="search" placeholder="Jump to a project"></tp-input>
<tp-kbd-group slot="inline-end" separator="none">
<tp-kbd value="mod"></tp-kbd>
<tp-kbd>P</tp-kbd>
</tp-kbd-group>
</tp-input-group>
Icon keys
A key’s content replaces the generated notation, so it can hold a tp-icon, which takes the key’s icon size. Give icon-only keys a label for their accessible name.
An explicit Icon size remains supported.
Icon keys
Default density
Compact density
Restart from the initial state
Show the copyable source
keyLabels on a group replaces the visible text and spoken name of generated keys, and the then entry translates the sequence word; children inherit it. Spacing is logical, so hints follow right-to-left text. Set dir="ltr" on a group when the notation must keep left-to-right order.
Literal slotted content is authored content and is not translated automatically. Keep essential shortcuts available in equivalent prose or the owning control’s accessible description.
Localized and right-to-left
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionvaluevaluestring''The key to draw, such as mod, shift, enter or K; mod is Command on macOS and Ctrl elsewhere.
Slots
SlotDescriptiondefaultText or an Icon that replaces the generated notation; give an icon a label.
CSS parts
PartDescription::part(kbd)The keycap, a native keyboard-input element.
<tp-kbd-group>
Attributes
AttributePropertyTypeDefaultDescriptionseparatorseparatorKbdSeparator'plus'What sits between the children: plus for a chord, none for adjacent keycaps, then for a sequence.
Slots
SlotDescriptiondefaultThe Kbd elements, or nested groups for a sequence of chords, as direct children.
CSS parts
PartDescription::part(kbd-group)The native keyboard-input element around the keys of a shortcut.
Related
Components, widgets and patterns that use this one.