Device.HasKeyboard — whether to show key hints

Summary#

Show which keys move through a list where there are keys to press:

[Route("/inbox")] [AllowAnonymous]
component InboxPage() {
  render {
    Stack(gap: 2) {
      Text("Your messages");
      if (Device.HasKeyboard) { Text("J and K move between messages"); }
    }
  }
}

Signature#

Device.HasKeyboard   // bool — a mouse or a trackpad, or a physical key pressed on this page

Description#

How does it decide?#

No browser says whether a keyboard is attached, so the answer is worked out from two signs:

• The pointer is a mouse or a trackpad. A precise pointer that can hover almost always comes with keys — a laptop, a desk. This is known the moment the page renders.
• A physical key was pressed on this page. It settles the case the pointer cannot: a tablet with a keyboard case. From the first such key the answer is true for as long as the page is open. Typing on an on-screen keyboard does not count — a key pressed into a text field, or as part of an input method's composition, could have come from one. A key no on-screen keyboard has (Tab, Escape, the arrows, Home, End, Page Up/Down, F1–F12), a key pressed with Ctrl, Alt or Cmd held, or any key pressed outside a field does count.

Device.HasKeyboard or Viewport.AtLeast?#

A wide window is not a keyboard — a tablet in landscape is 1180px wide — and a narrow one may have one.

Where can I use it?#

In render, where it follows the answer live (the hint appears the moment the first key is pressed), and in a client action, where it is read once when the action runs. It is a bool, so it combines like any other: if (Device.HasKeyboard && Layout.AtLeast(Tablet)) { … }.

What does the server answer?#

false — the touch-first answer, as Viewport.AtLeast answers the narrow one. A server-rendered page paints no key hints, and the browser adds them on its first render where they apply. A server function that reads it also gets false: a server knows nothing about the hardware a page is used on.

Can I name something Device myself?#

Yes — a field, a parameter or a local called Device is yours, and Device.HasKeyboard then reads it, as a local hides a type of the same name in C#.

See also#

• Viewport.AtLeast and Layout.AtLeast — the window, or the room this component has — the window's width, and the room this component has
• keys — key bindings and the hints that show them