Interactive Components

Interactive components respond to user input. For example, the user can click a button or drag a slider. You can use Lua scripts or Script Canvas graphs to link the component response to an action.

An interactive element is defined as an element that has an interactive component applied.

Section topics

TopicDescription
Interactive component propertiesLearn about the properties that configure an interactive component’s navigation, state, and behavior.
UI ButtonAdd a button that can trigger events.
UI CheckboxAdd a checkbox that toggles.
UI Radio ButtonAdd a radio button that manages state.
UI Radio Button GroupAdd a radio button group to select an option from multiple choices.
UI SliderAdd a slider to select a value from a numerical range.
UI Text InputAdd the Text Input component to allow users to enter and edit text.
UI Scroll BarAdd vertical or horizontal scroll bars to UI elements.
UI Scroll BoxUse the Scroll Box component to scroll or drag UI elements in any direction.
UI Dynamic Scroll BoxLearn how to spawn scroll box elements dynamically at runtime.
UI DraggableCreate elements that you can drag and drop on a UI canvas.
UI Drop TargetAdd target locations to a canvas that allow UI draggable elements.
UI DropdownAdd a dropdown menu to a UI canvas.
UI Dropdown OptionLearn how to add options to a dropdown menu.
UI Hierarchy Interactivity ToggleLearn how to enable and disable interactivity on an element and all it’s children.

Interactive Component Properties

Work with the input enabled, states, navigation, and action properties of the UI Editor in O3DE.

UI Button

Use a button component to make an element behave like a button in the O3DE UI Editor.

UI Checkbox

Use a check box component to make an element behave like a check box in O3DE’s UI Editor.

UI Radio Button

Use a RadioButton component to make an element behave like a radio button in O3DE’s UI Editor.

UI Radio Button Group

Use a Radio Button Group component to manage radio button groups in O3DE’s UI Editor.

UI Slider

Use a slider component to make an element behave like a slider in O3DE’s UI Editor.

UI Text Input

Use a text input component to make an element offer player input in O3DE’s UI Editor.

UI Scroll Bar

Use a scroll bar component to add a scroll bar in the Open 3D Engine UI Editor.

UI Scroll Box

Use a scroll box component to present content, such as images or text, within a scrollable area in O3DE’s UI Editor.

UI Dynamic Scroll Box

Use the Dynamic Scroll Box component to create Scroll Box elements at runtime in Open 3D Engine (O3DE).

UI Draggable

Use the draggable component in the Open 3D Engine UI Editor to make UI elements movable.

UI Drop Target

Use the Drop Target component with the Draggable component to implement drag-and-drop behavior in the Open 3D Engine UI Editor.

UI Dropdown

Use the Dropdown component to make an element behave like a drop-down menu in the Open 3D Engine UI Editor.

UI Dropdown Option

Use the Dropdown Option component to make an element an option in a drop-down menu in the Open 3D Engine UI Editor.

UI Hierarchy Interactivity Toggle

Use a Hierarchy Interactivity Toggle to enable and disable interaction in an element and all its children.