Prompt

import { Prompt } from '@bbc/front-end-kit/vue'

A flexible prompt dialog component built on top of the Popup component. It is designed for collecting user input or confirmation, supporting custom forms, configurable action buttons, and advanced customization via slots and component overrides.

Getting started

<template>
    <Prompt
        v-model:visible="showPrompt"
        v-model:values="formValues"
        :options="[
            { label: 'Yes', value: true, type: 'submit' },
            { label: 'No', value: false, props: { class: '--bordered' } }
        ]"
        @answered="onAnswered"
    >
        <template #form>
            <FormKit type="textarea" name="reason" placeholder="Reason (optional)" />
        </template>
    </Prompt>
</template>

<script setup>
import { ref } from 'vue';
import { Prompt } from '@bbc/front-end-kit/vue';

const showPrompt = ref(false);
const formValues = ref({});

function onAnswered({ values, answer }) {
  console.log('User answered:', answer, 'Form values:', values);
}
</script>

Guidelines

Use the options prop to define the set of actions the user can take (e.g., Accept/Decline).
Use the form slot for custom form fields inside the prompt.
Options with type: 'submit' trigger FormKit's form submission and pass the collected field values in the answered payload. Options without it close the prompt immediately with values: null.
The prompt always sets :can-close="false" on the underlying Popup — the close button is never shown. The only way to close it is by clicking one of the action buttons.
You can override the Popup and Button components for advanced customization.

API

Properties

options

Array of button option objects to display as actions. Each option should have at least a label and value. You can also pass extra props to each button via the props key. Options with type: 'submit' trigger form submission; all others close the prompt immediately.

Values: Array of objects { label: String, value: any, type?: String, props?: Object }

Default:

[
  { label: 'Accept', value: true, type: 'submit' },
  { label: 'Decline', value: false, props: { class: '--bordered' } }
]

Override the Popup component used for the prompt container.

Values: Vue Component

Default: Popup

Button

Override the Button component used for the action buttons.

Values: Vue Component

Default: ByltButton

Models

visible

Reactive flag to toggle the prompt's visibility.

Type: Boolean

Default: false

values

Initial values for the form. Note: this is passed via :model to the inner FormKit form, which is non-standard — FormKit manages its own internal field state. The answered payload's values comes from FormKit's own submit event, not from this model.

Type: Object

Default: {}

Events

answered

Emitted when an action button is clicked. The prompt closes automatically after emitting.

For submit-type options: values contains the FormKit form data, answer is the option's value.

For non-submit options: values is null, answer is the option's value.

Payload: { values: Object|null, answer: any }