Text
Edit Unicode text while preserving selection and IME composition.
Usage
Unicode selection
Move and replace selections by Unicode code point without splitting user-perceived text.
Move and replace selections by Unicode code point without splitting user-perceived text.
Current: 한글과 emoji 👋
<!-- Text / Unicode Selection -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('한글과 emoji 👋')
</script>
<template>
<TextField v-model="value" />
</template>Multiline
Edit multiple lines while preserving selection and composition state.
Edit multiple lines while preserving selection and composition state.
Current: Sectile
<!-- Text / Multiline -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('Sectile')
</script>
<template>
<TextField v-model="value" multiline />
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Let the parent own the current value and apply accepted changes back to the component.
Current: Sectile
<!-- Text / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('Sectile')
</script>
<template>
<TextField v-model="value" />
</template>Examples
Controlled IME
Type Korean text in a parent-controlled field, then press Tab during the final composition. The committed value updates once without duplicating the last syllable.
Type Korean text in a parent-controlled field, then press Tab during the final composition. The committed value updates once without duplicating the last syllable.
Current: Empty
<!-- Text / Ime Mixed -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('')
</script>
<template>
<TextField v-model="value" />
</template>API
Vue package: @sectile/vue/text
TextField
Props
TextFieldProps
autocompleteNative autocomplete hint forwarded to the editable input.
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
formID of the native form associated with the control.
modelModifiersVue v-model modifiers applied to text updates.
modelValueCurrent value when state is controlled by the parent.
multilineWhether the text field renders a textarea.
nameName used for native form submission.
placeholderText shown when no value has been entered.
readonlyWhether the value can be inspected but not changed.
requiredWhether the control must contain a valid value before submission.
typeSelection or behavior mode used by the component.
Events
TextField
update:modelValueEmitted when the component requests a new controlled value.
Other types
TextFieldModelModifiers
| Name | Type | Required |
|---|---|---|
lazy | boolean | — |
number | boolean | — |
trim | boolean | — |
TextFieldValueChangeHandler
type TextFieldValueChangeHandler = (value: string | number) => voidParts
Shared scope: [data-scope="text"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
input | [data-part="input"] | Accepts the editable value or draft. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Standard editing keys | Edit and select text with the host input conventions. |
| Tab | Commit focus movement without replacing native text behavior. |
Accessibility
The labeled input or textarea preserves native editing, selection, IME, disabled, and readonly semantics.