TextInput ​

A flexible input for entering text, numbers etc. Supports many sizes, styles, and custom slots.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { TextInput } from 'frappe-ui'

const value = ref('')
</script>

<template>
  <TextInput v-model="value" placeholder="Enter your name" />
</template>

Variants ​

Sizes ​

Types ​

Prefix and suffix slots ​

USD

Labeling ​

label, description, error, and required are wired into the underlying input via the shared labeling contract. Setting error suppresses the description and applies aria-invalid="true".

We'll only use this to send product updates.

Custom label and description slots ​

The #label slot receives { required } so callers can render their own required indicator.

Lowercase letters and dashes only.

States ​

API Reference ​

Show types
typescript
import type { InputSize, InputVariant } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'
import type { TextInputTypes } from '../types/TextInput'

export interface TextInputProps extends InputLabelingProps {
  /** HTML input type (text, email, number, password, etc.). */
  type?: TextInputTypes

  /** Visual size of the input. */
  size?: InputSize

  /** Style variant of the input. */
  variant?: InputVariant

  /** Placeholder text shown when the input is empty. */
  placeholder?: string

  /** Disables the input when true. */
  disabled?: boolean

  /** Bound value of the input. */
  modelValue?: string | number

  /** Debounce delay (in ms) before emitting value updates. */
  debounce?: number
}

export interface TextInputEmits {
  /** Fired when the input value changes. */
  'update:modelValue': [value: string]
}
Prop Default Type
type
"text"
TextInputTypes

HTML input type (text, email, number, password, etc.).

size
"sm"
InputSize

Visual size of the input.

variant
"subtle"
InputVariant

Style variant of the input.

placeholder
—
string

Placeholder text shown when the input is empty.

disabled
—
boolean

Disables the input when true.

modelValue
—
string | number

Bound value of the input.

debounce
—
number

Debounce delay (in ms) before emitting value updates.

label
—
string

Label rendered above (or beside, for binary controls) the input.

description
—
string

Helper text rendered below the input. Hidden when `error` is set.

error
—
string | FrappeUIError

Error message rendered below the input. When set, the control receives `aria-invalid="true"` and `data-state="invalid"`. May be either a string or an `Error` object whose `messages?: string[]` is rendered as stacked lines (with `Error.message` as the fallback).

required
—
boolean

Marks the field as required. Renders an asterisk next to the label and forwards `required` / `aria-required` to the underlying control.

id
—
string

HTML id of the underlying control. Auto-generated via `useId()` if omitted.

Slot Payload
prefix
—

Content rendered before the input (left side)

suffix
—

Content rendered after the input (right side)

label
{ required: boolean; }

Overrides the rendered label content. Receives `{ required }`.

description
—

Overrides the rendered description content.

Event Payload
update:modelValue
[value: string]

Fired when the model value changes.

TextEditorTextarea