capacitor-extended-dialog

A 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.

Install

npm install capacitor-extended-dialog
npx cap sync

Android sheet behavior

• In mode: 'basic', native Android sheets open between 50% and 80% of screen height.
• 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 mode: 'fullscreen', the same top-content/bottom-actions layout is preserved with a scrollable body area for overflow.

API

• alert(...)
• confirm(...)
• prompt(...)
• singleSelect(...)
• multiSelect(...)
• sheet(...)
• messageSheet(...)
• Interfaces
• Type Aliases

alert(...)

alert(options: AlertOptions) => any

Show an alert dialog with a single dismiss button.

| Param | Type | Description | | ------------- | ----------------------------------------------------- | ------------------------------ | | options | AlertOptions | - Alert configuration options. |

Returns: any

confirm(...)

confirm(options: ConfirmOptions) => any

Show a confirmation dialog with OK and Cancel buttons.

| Param | Type | Description | | ------------- | --------------------------------------------------------- | -------------------------------- | | options | ConfirmOptions | - Confirm configuration options. |

Returns: any

prompt(...)

prompt(options: PromptOptions) => any

Show a prompt dialog with a text input field.

| Param | Type | Description | | ------------- | ------------------------------------------------------- | ------------------------------- | | options | PromptOptions | - Prompt configuration options. |

Returns: any

singleSelect(...)

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

multiSelect(...)

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

sheet(...)

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

messageSheet(...)

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

Interfaces

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 |

Type Aliases

DialogMode

Dialog presentation mode.

• 'basic' — Standard modal dialog (default)
• 'fullscreen' — Full-screen dialog presentation

'basic' | 'fullscreen'