Show native dialogs and sheets in Capacitor with Material 3 and Liquid Glass UI
npm install capacitor-extended-dialogA Capacitor 6+ plugin for native dialogs — alerts, confirms, prompts, single/multi-select, and structured sheets — with Material 3 styling on Android, Liquid Glass on iOS, and a web fallback. Supports basic and fullscreen presentation modes with customizable colors, fonts, and layout.
``bash`
npm install capacitor-extended-dialog
npx cap sync
- In mode: 'basic', native Android sheets open between 50% and 80% of screen height.mode: 'fullscreen'
- Dragging up continuously increases available body space while keeping header content at the top and actions pinned to the bottom.
- If sheet content exceeds the 80% initial cap, the body area becomes internally scrollable.
- In , the same top-content/bottom-actions layout is preserved with a scrollable body area for overflow.
* alert(...)
* confirm(...)
* prompt(...)
* singleSelect(...)
* multiSelect(...)
* sheet(...)
* messageSheet(...)
* Interfaces
* Type Aliases
`typescript`
alert(options: AlertOptions) => any
Show an alert dialog with a single dismiss button.
| Param | Type | Description |
| ------------- | ----------------------------------------------------- | ------------------------------ |
| options | AlertOptions | - Alert configuration options. |
Returns: any
--------------------
`typescript`
confirm(options: ConfirmOptions) => any
Show a confirmation dialog with OK and Cancel buttons.
| Param | Type | Description |
| ------------- | --------------------------------------------------------- | -------------------------------- |
| options | ConfirmOptions | - Confirm configuration options. |
Returns: any
--------------------
`typescript`
prompt(options: PromptOptions) => any
Show a prompt dialog with a text input field.
| Param | Type | Description |
| ------------- | ------------------------------------------------------- | ------------------------------- |
| options | PromptOptions | - Prompt configuration options. |
Returns: any
--------------------
`typescript`
singleSelect(options: SingleSelectOptions) => any
Show a single-select dialog where the user picks one option.
| Param | Type | Description |
| ------------- | ------------------------------------------------------------------- | -------------------------------------- |
| options | SingleSelectOptions | - Single select configuration options. |
Returns: any
--------------------
`typescript`
multiSelect(options: MultiSelectOptions) => any
Show a multi-select dialog where the user picks one or more options.
| Param | Type | Description |
| ------------- | ----------------------------------------------------------------- | ------------------------------------- |
| options | MultiSelectOptions | - Multi select configuration options. |
Returns: any
--------------------
`typescript`
sheet(options: SheetOptions) => any
Show a sheet dialog with a header, title, and structured data rows.
| Param | Type | Description |
| ------------- | ----------------------------------------------------- | ------------------------------ |
| options | SheetOptions | - Sheet configuration options. |
Returns: any
--------------------
`typescript`
messageSheet(options: MessageSheetOptions) => any
Show a message sheet dialog with an optional header logo, title, and message.
| Param | Type | Description |
| ------------- | ------------------------------------------------------------------- | -------------------------------------- |
| options | MessageSheetOptions | - Message sheet configuration options. |
Returns: any
--------------------
#### AlertOptions
| Prop | Type | Description | Default |
| ----------------- | ------------------- | ----------------------------- | ----------------- |
| buttonTitle | string | Title for the dismiss button. | "OK" |
#### ConfirmOptions
| Prop | Type | Description | Default |
| ----------------------- | ------------------- | ---------------------------------- | --------------------- |
| okButtonTitle | string | Title for the confirmation button. | "OK" |
| cancelButtonTitle | string | Title for the cancel button. | "Cancel" |
#### ConfirmResult
| Prop | Type | Description |
| ----------- | -------------------- | ----------------------------------------------------------- |
| value | boolean | Whether the user confirmed (true) or cancelled (false). |
#### PromptOptions
| Prop | Type | Description | Default |
| ----------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| okButtonTitle | string | Title for the confirmation button. | "OK" |
| cancelButtonTitle | string | Title for the cancel button. | "Cancel" |
| inputPlaceholder | string | Placeholder text shown in the input field when empty. | |
| inputText | string | Pre-filled value for the input field. | |
| focusInput | boolean | Whether to automatically focus the input field and open the keyboard when the dialog appears. Note: On iOS, basic (non-fullscreen) dialogs always auto-focus the input field due to UIAlertController's built-in behavior. This option only takes effect on iOS when using fullscreen mode (mode: 'fullscreen'). On Android and web, this works for all modes. | false |
#### PromptResult
| Prop | Type | Description |
| --------------- | -------------------- | -------------------------------------------------------- |
| value | string | The text entered by the user. Empty string if cancelled. |
| cancelled | boolean | Whether the user cancelled the dialog. |
#### SingleSelectOptions
| Prop | Type | Description | Default |
| ----------------------- | ------------------- | ----------------------------------------- | --------------------- |
| options | {} | List of options to display for selection. | |
| selectedValue | string | Value of the initially selected option. | |
| okButtonTitle | string | Title for the confirmation button. | "OK" |
| cancelButtonTitle | string | Title for the cancel button. | "Cancel" |
#### SelectOption
| Prop | Type | Description |
| ----------- | ------------------- | ------------------------------------------- |
| label | string | Display text for the option. |
| value | string | Value returned when the option is selected. |
#### SingleSelectResult
| Prop | Type | Description |
| --------------- | --------------------------- | --------------------------------------------------------- |
| value | string \| null | The value of the selected option, or null if cancelled. |cancelled
| | boolean | Whether the user cancelled the dialog. |
#### MultiSelectOptions
| Prop | Type | Description | Default |
| ----------------------- | ------------------- | ----------------------------------------- | --------------------- |
| options | {} | List of options to display for selection. | |
| selectedValues | {} | Values of the initially selected options. | |
| okButtonTitle | string | Title for the confirmation button. | "OK" |
| cancelButtonTitle | string | Title for the cancel button. | "Cancel" |
#### MultiSelectResult
| Prop | Type | Description |
| --------------- | -------------------- | ------------------------------------------------------------- |
| values | {} | The values of the selected options. Empty array if cancelled. |
| cancelled | boolean | Whether the user cancelled the dialog. |
#### SheetOptions
| Prop | Type | Description |
| ------------------------ | ------------------------------------------------- | -------------------------------------------------------- |
| headerLogo | string | Header logo - supports base64 data URL or HTTP/HTTPS URL |
| title | string | Sheet title |
| subtitle | string | Optional subtitle displayed between title and rows |
| rows | {} | Description rows |
| confirmButtonTitle | string | Confirm button title |
| cancelButtonTitle | string | Cancel button title |
| mode | DialogMode | Dialog mode |
#### SheetRow
| Prop | Type | Description |
| ----------- | ------------------- | --------------------------------------------------------------- |
| title | string | Row title (required) |
| logo | string | Optional logo/icon - supports base64 data URL or HTTP/HTTPS URL |
| value | string | Optional value displayed on the right |
#### SheetResult
| Prop | Type | Description |
| --------------- | -------------------- | ------------------------------------- |
| confirmed | boolean | True if confirmed, false if cancelled |
#### MessageSheetOptions
| Prop | Type | Description |
| ------------------------ | ------------------------------------------------- | -------------------------------------------------------- |
| headerLogo | string | Header logo - supports base64 data URL or HTTP/HTTPS URL |
| title | string | Sheet title |
| subtitle | string | Optional subtitle displayed between title and message |
| message | string | Message body displayed in the sheet |
| confirmButtonTitle | string | Confirm button title |
| cancelButtonTitle | string | Cancel button title |
| mode | DialogMode | Dialog mode |
#### MessageSheetResult
| Prop | Type | Description |
| --------------- | -------------------- | ------------------------------------- |
| confirmed | boolean | True if confirmed, false if cancelled |
#### DialogMode
Dialog presentation mode.
- 'basic' — Standard modal dialog (default)'fullscreen'` — Full-screen dialog presentation
-
'basic' | 'fullscreen'