Vue NativeVue Native
Guide
Components
Composables
Navigation
  • iOS
  • Android
GitHub
Guide
Components
Composables
Navigation
  • iOS
  • Android
GitHub
  • Layout

    • VView
    • VScrollView
    • VSafeArea
    • VKeyboardAvoiding
  • Text & Input

    • VText
    • VInput
  • Interactive

    • VButton
    • VSwitch
    • VSlider
    • VSegmentedControl
  • Media

    • VImage
    • VWebView
  • Lists

    • VList
  • Feedback

    • VActivityIndicator
    • VProgressBar
    • VAlertDialog
    • VActionSheet
    • VModal
  • System

    • VStatusBar
    • VPicker

VInput

Text input field. Maps to UITextField on iOS and EditText on Android.

Usage

<script setup>
import { ref } from '@thelacanians/vue-native-runtime'
const text = ref('')
</script>

<template>
  <VInput
    v-model="text"
    placeholder="Type something…"
    :style="{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12 }"
  />
</template>

Props

PropTypeDefaultDescription
modelValue / v-modelstring''Input value
placeholderstring—Placeholder text
keyboardTypeKeyboardType'default'Keyboard type
secureTextEntrybooleanfalsePassword field (hides text)
autoCapitalize'none' | 'sentences' | 'words' | 'characters''sentences'Auto-capitalization
autoCorrectbooleantrueAuto-correction
returnKeyType'done' | 'go' | 'next' | 'search' | 'send''done'Return key label
multilinebooleanfalseMulti-line text input
maxLengthnumber—Maximum character count
styleStyleProp—Layout + appearance styles

keyboardType values

ValueDescription
'default'Standard keyboard
'numeric'Number pad
'email-address'Email keyboard
'phone-pad'Phone dialer
'decimal-pad'Decimal number pad
'url'URL keyboard

Events

EventPayloadDescription
@update:modelValuestringText changed
@focus—Input focused
@blur—Input unfocused
@submitstringReturn key pressed
Edit this page
Last Updated: 2/23/26, 5:58 AM
Contributors: Abdul Hamid, Claude Sonnet 4.6, Claude Opus 4.6
Prev
VText