ModalInput

A text input with a built-in modal/dialog trigger button. Useful for opening a selection modal from within a form field, showing the selected value as read-only text.

Usage

<script setup>
import { ref } from 'vue'
import { ModalInput } from 'praxis-vue-ui'

const value = ref('')
const showModal = ref(false)

const openModal = () => { showModal.value = true }
</script>

<template>
  <ModalInput
    :model-value="value"
    label="Provider"
    placeholder="Click to select a provider..."
    @click="openModal"
  />

  <MyProviderModal v-model:visible="showModal" @select="value = $event" />
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Text value displayed in the read-only input.
label	string	undefined	Label above the input.
placeholder	string	''	Placeholder text when no value is selected.
required	boolean	false	Shows required asterisk.
disabled	boolean	false	Disables the trigger button.

Emits

Event	Payload	Description
click	void	Emitted when the modal trigger button is clicked.