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

``bash
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

$3

`typescript
alert(options: AlertOptions) => any
`

Show an alert dialog with a single dismiss button.

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

Returns: any

--------------------

$3

`typescript
confirm(options: ConfirmOptions) => any
`

Show a confirmation dialog with OK and Cancel buttons.

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

Returns: any

--------------------

$3

`typescript
prompt(options: PromptOptions) => any
`

Show a prompt dialog with a text input field.

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

Returns: any

--------------------

$3

`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

--------------------

$3

`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

--------------------

$3

`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

--------------------

$3

`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

--------------------

$3


#### 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 |

$3


#### DialogMode

Dialog presentation mode.

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

'basic' | 'fullscreen'