PWA UIv0.1 beta
Documentation
Docs / Components / KeyboardAvoidingView

Component

KeyboardAvoidingView

KeyboardAvoidingView handles application layouts outside Base UI drawers by exposing stable viewport and keyboard CSS variables.

Preview

Are the mobile components ready?The first pass is. I’m checking keyboard behavior now.

Installation

bash
pnpm dlx shadcn@latest add https://pwaui.com/r/keyboard-avoiding-view.json

Usage

tsx
import { KeyboardAvoidingView } from "@/components/ui/keyboard-avoiding-view"
export function Composer() {  return (    <KeyboardAvoidingView behavior="padding" keyboardOffset={8}>      <textarea aria-label="Message" />      <button>Send</button>    </KeyboardAvoidingView>  )}

Anatomy

KeyboardAvoidingViewuseVisualViewport

Behavior notes

  • Behaviors: padding, height, and position.
  • Exposes --pwa-keyboard-height and --pwa-visual-viewport-height.
  • Inside BottomSheet, prefer Base UI's dedicated keyboard provider.

Platform limitations

  • Keyboard avoidance depends on the Visual Viewport API and the page's interactive-widget policy. With Android's overlays-content the viewport does not resize, so --pwa-keyboard-height stays 0 and this view does not move. Use resizes-content or resizes-visual if you depend on it. See Platform limitations.
  • On iOS Safari the OS also auto-scrolls the focused field, which can compound with behavior="position". Test the padding and height behaviors on a real device.

Accessibility

The component is layout-only. Preserve normal focus order and label all form controls inside it.