Hi Creators!
You can now easily build cross-platform UI that displays the correct bindings for all InputActions! 
Players often have multiple input devices connected at once, and can switch between them mid-gameplay – connecting a gamepad, then reaching back for the keyboard. Showing a player which key or button triggers an action used to require a lot of manual work: calling GetImageForKeyCode, resolving the right binding per device, wiring up signals for device switches, and toggling between text and image states yourself.
Now you can skip all of that by adding a single InputActionLabel instance! Point it at an InputAction, and it displays the right hotkey no matter what device your players are on. It uses new APIs on the Input Action System that tracks the player’s current and preferred input device (similar to PreferredInput), so your hints stay correct without any device-switch logic from you.
Use this to easily build your HUD, ability bars, or interaction prompts.
There are three pieces to this release:
InputActionLabel instance: A new UI instance that uses PreferredBinding to dynamically display the relevant binding in your game.
DisplayName / DisplayImage: New properties on InputBinding that allow you to customize how each binding should display when queried.
PreferredBinding: New property on InputAction that determines which binding is preferred based on a player’s connected input devices.
Keep reading for more details!
How to Enable the Beta
- Navigate to File > Beta Features.
- Find and check the box for InputActionLabel.
- Restart Roblox Studio when prompted.
During this Studio beta period, InputActionLabel is non-publishable – you can experiment with it in Studio, and once we release to the client it’ll be available in published experiences. PreferredBinding on InputAction and DisplayName/DisplayImage APIs on InputBinding are live in production, so you can use these in your live experiences today if helpful in your workflow!
InputActionLabel
InputActionLabel is a new UI instance that inherits directly from GuiObject and automatically renders keybinding information from an InputAction’s preferred binding. (If you’re new to the Input Action System, check out our documentation here, or watch our tutorial on Youtube.) You assign an InputAction through its properties and get an automatically managed keybinding indicator – no scripting, no signal wiring, and full styling support!
Properties
Beyond the standard GuiObject properties (Size, Position, BackgroundColor3, BackgroundTransparency, etc.), InputActionLabel has the following properties:
InputAction: A read/write reference to the action used to resolve the display output.ResolvedText: A read-only string containing the resolved display text at run-time. Empty when the label is showing an image.ResolvedImageContent: A read-only Content value containing the resolved display image at run-time. Empty when the label is showing text.
It also carries over familiar text and image styling properties from TextLabel and ImageLabel — TextColor3, FontFace, TextSize, TextXAlignment, ImageColor3, and so on. UIModifiers like UICorner, UIStroke, and UIPadding parent directly to the InputActionLabel and affect the container uniformly in both text and image modes.
Adding Your Own InputActionLabel
You can add an InputActionLabel as simply as any other UI instance! Check out our sample placefile to follow along and see more complex examples:
InputActionLableExample.rbxl (101.5 KB)
- Under your
ScreenGui, insert anInputActionLabeljust like any otherGuiObject. - In the Properties panel, set the
InputActionproperty to the action you want to display (e.g. your Jump action under ReplicatedStorage). Your DataModel should look like this:
- If you don’t apply any Styling or just use Studio defaults, the InputActionLabel will appear as a vanilla UI instance.
- At run-time, the label resolves the preferred binding and picks the associated display text or display image automatically.
Styling with StyleSheets
InputActionLabel works with the Styling system just like any other GuiObject, so you can match your hotkeys to your game’s theme! (If you’re new to our Styling system, check out our documentation here, or watch our tutorial on Youtube.) Now, there’s a new StyleRule for InputActionLabel that you can customize.
If you’re using default Studio styling, note that ImageColor3 will be set to black, since our platform keycodes render as white.
New Input Action System APIs
How does InputActionLabel work under the hood? We’ve added three new APIs to InputAction & InputBinding to support auto-hotkey display:
- InputBinding.DisplayName: A read/write string for a custom text override on the binding.
- InputBinding.DisplayImage: A read/write Content value for a custom image override on the binding.
- InputAction.PreferredBinding: A read-only property that returns the child InputBinding best matching the player’s current preferred input (KeyboardAndMouse, Gamepad, or Touch). It updates dynamically as the player’s device configuration changes.
If you’re using InputActionLabel, DisplayImage will be prioritized over DisplayName if available. If you don’t designate a custom DisplayName or DisplayImage for any binding, the engine will use the binding’s default KeyCode. For example, the space bar keycode will display “Space”, and the GamepadA keycode will display the A button.
Made With Love
Huge thanks to @rygulwg1 (our intern!), @AykeriZero, @SharpenedByWater, @uiuxartist, @runitbackrolfo, @Astonish1656, @RaspberryPie007, and @MetaVars for making this happen. While you try these out, we’ll be hard at work continuing to make cross-platform development easier for you.
We can’t wait to see the awesome cross-platform UI you build with these new APIs – as always, share your creations, let us know your thoughts, and please send feedback if you have any! 
