> For the complete documentation index, see [llms.txt](/llms.txt).

# Interactive UI

You can display interactive user interface (UI) components. Interactive UI is an extension of [custom UI](/snaps/features/custom-ui/). It allows interfaces returned from [dialogs](/snaps/features/custom-ui/dialogs/), [home pages](/snaps/features/custom-ui/home-pages/), and [transaction insights](/snaps/reference/entry-points/#ontransaction) to respond to user input.

The following interactive UI components are available:

- [Button](/snaps/features/custom-ui/#button)
- [Dropdown](/snaps/features/custom-ui/#dropdown)
- [Field](/snaps/features/custom-ui/#field)
- [Form](/snaps/features/custom-ui/#form)
- [Input](/snaps/features/custom-ui/#input)

## Create an interactive interface[​](#create-an-interactive-interface "Direct link to Create an interactive interface")

Create an interactive interface using the [snap_createInterface](/snaps/reference/snaps-api/snap%5Fcreateinterface/) method. This method returns the ID of the created interface. You can pass this ID to [snap_dialog](/snaps/reference/snaps-api/snap%5Fdialog/), returned from [onTransaction](/snaps/reference/entry-points/#ontransaction), or from [onHomePage](/snaps/reference/entry-points/#onhomepage).

If you need to [update the interface](#update-an-interactive-interface) or [get its state](#get-an-interactive-interfaces-state-and-context) at a future time, you should store its ID in the Snap's storage.

### Add context to an interface[​](#add-context-to-an-interface "Direct link to Add context to an interface")

You can optionally add context to an interface by passing a `context` object to the [snap_createInterface](/snaps/reference/snaps-api/snap%5Fcreateinterface/) method. This object can contain any data you want to pass to the interface. This context will be passed to [onUserInput](/snaps/reference/entry-points/#onuserinput) when the user interacts with the interface.

## Update an interactive interface[​](#update-an-interactive-interface "Direct link to Update an interactive interface")

To update an interactive interface that is still active, use the [snap_updateInterface](/snaps/reference/snaps-api/snap%5Fupdateinterface/) method. Pass the ID of the interface to be updated, and the new UI.

Updating an interface can be done as part of the [onUserInput](/snaps/reference/entry-points/#onuserinput) entry point or as part of an asynchronous process.

The following is an example flow:

1. The user activates an interactive interface to send Bitcoin funds to an address. The initial interface contains an address input, an amount input, and a **Send funds** button.
2. The user fills the fields, and selects the **Send funds** button.
3. `onUserInput` is called, and the logic detects that the **Send funds** button was selected.
4. `snap_updateInterface` is called, replacing the **Send funds** button with a [spinner](/snaps/features/custom-ui/#spinner).
5. Custom logic sends the funds.
6. `snap_updateInterface` is called again, replacing the whole UI with a success message.

## Get an interactive interface's state and context[​](#get-an-interactive-interfaces-state-and-context "Direct link to Get an interactive interface's state and context")

At any point, you can retrieve an interactive interface's state and context. To retrieve its state, call the [snap_getInterfaceState](/snaps/reference/snaps-api/snap%5Fgetinterfacestate/)method with the interface ID. To retrieve its context, call [snap_getInterfaceContext](/snaps/reference/snaps-api/snap%5Fgetinterfacecontext/)with the interface ID.

## Example[​](#example "Direct link to Example")

See the [@metamask/interactive-ui-example-snap](https://github.com/MetaMask/snaps/tree/main/packages/examples/packages/interactive-ui)package for a full example of implementing interactive UI.