Skip to content

hflexgrig/CustomInputAccessoryViewInMAUIiOS

Repository files navigation

buymeacoffee.com/hakobgrigoryan

qr-code

How to Customize InputAccessoryView on iOS

By default, when a native editor control receives focus on iOS, a system-provided InputAccessoryView appears above the on-screen keyboard. As shown below, this typically includes a blue rounded button with a white checkmark, which dismisses the keyboard when tapped.

A similar—but even less desirable—behavior occurs when using a WebView (in our case, a HybridWebView) containing an HTML <textarea>. In this scenario, iOS displays a large semi-transparent white panel above the keyboard, featuring up and down arrow buttons on the left and a checkmark button on the right. Tapping the checkmark again dismisses the keyboard.

This default UI is often unnecessary, visually intrusive, and difficult to customize, especially when building rich text editors or custom input experiences.

Simulator.Screen.Recording.-.iPhone.16e.-.2026-01-20.at.21.35.48.mov

Our goal is to fully customize this accessory view using custom handlers. For the native editor, this is relatively straightforward. However, achieving the same result for a HybridWebView proved to be significantly more challenging.

While the solution initially worked in Debug mode, it took several intense days to make it function correctly in a TestFlight release build. Turning that into a stable, distributable solution for a real production app was, frankly, a nightmare—mostly due to subtle iOS behavior differences between debug and release configurations.

After overcoming these issues, this is how the customized accessory view looks. In the sample project, we added three toolbar buttons to simulate Bold, Italic, and Underline actions, along with a custom “Close Keyboard” button.

Simulator.Screen.Recording.-.iPhone.16e.-.2026-01-20.at.21.51.38.mov

You can also completely remove it by overriding inputAccessoryView to return null in MauiTextView child class

private sealed class AccessoryTextView : MauiTextView
	{
		public AccessoryTextView() : base(CGRect.Empty)
		{
		}

		public UIView? CustomAccessoryView { get; set; }

		public override UIView? InputAccessoryView => Null;
	}

About

Customizing inputAccessoryView on your MAUI iOS project for the native. Editor, Entry and also WebView text inputs

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published