TextField & TextArea

Material Design text fields that allow users to enter text.

Basic Usage

Username

Password

🔒

Enter your password

Password

🔒

Username:

<template>
  <Column :gap="20">
    <TextField
      v-model="value"
      :decoration="
        InputDecoration({
          labelText: 'Username',
          hintText: 'Enter your username',
          border: OutlineInputBorder(),
        })
      "
    />

    <TextField
      v-model="password"
      obscure-text
      :decoration="
        InputDecoration({
          labelText: 'Password',
          hintText: 'Enter your password',
          border: OutlineInputBorder(),
          prefixText: '🔒 ',
          floatingLabelBehavior: FloatingLabelBehavior.always,
        })
      "
    />
    <TextField
      v-model="password"
      obscure-text
      :decoration="
        InputDecoration({
          labelText: 'Password',
          hintText: 'Enter your password',
          border: UnderlineInputBorder(),
          prefixText: '🔒 ',
        })
      "
    />

    <Text>Username: {{ value }}</Text>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Column,
  Text,
  TextField,
  OutlineInputBorder,
  InputDecoration,
  UnderlineInputBorder,
  FloatingLabelBehavior,
} from "fluekit";

const value = ref("");
const password = ref("");
</script>

No Label

TextField without a floating label, relying on hintText or layout context.

With hintText only:

Enter something...

No label, no hint:

Underline border without label:

Type here

<template>
  <Column :gap="20">
    <Text>With hintText only:</Text>
    <TextField
      v-model="text1"
      :decoration="{
        hintText: 'Enter something...',
        border: OutlineInputBorder(),
      }"
    />

    <Text>No label, no hint:</Text>
    <TextField
      v-model="text2"
      :decoration="{
        border: OutlineInputBorder(),
      }"
    />

    <Text>Underline border without label:</Text>
    <TextField
      v-model="text3"
      :decoration="{
        hintText: 'Type here',
      }"
    />
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, TextField, OutlineInputBorder } from "fluekit";

const text1 = ref("");
const text2 = ref("");
const text3 = ref("");
</script>

TextArea (Multi-line)

You can use the TextArea component for multi-line input, or TextField with maxLines > 1.

Using TextArea component:

Biography

Using TextField with maxLines:

Notes

<template>
  <Column :gap="20">
    <Text>Using TextArea component:</Text>
    <TextArea
      v-model="bio"
      auto-grow
      :decoration="{
        labelText: 'Biography',
        hintText: 'Tell us about yourself',
        border: OutlineInputBorder(),
      }"
    />

    <Text>Using TextField with maxLines:</Text>
    <TextField
      v-model="notes"
      auto-grow
      :max-lines="3"
      :decoration="{
        labelText: 'Notes',
        border: OutlineInputBorder(),
      }"
    />
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, TextArea, TextField, OutlineInputBorder } from "fluekit";

const bio = ref("");
const notes = ref("");
</script>

Borders

Outline

Outline

Underline

Underline

<template>
  <Column :gap="20">
    <Text>Outline</Text>
    <TextField
      v-model="outline"
      :decoration="InputDecoration({ labelText: 'Outline', border: OutlineInputBorder() })"
    />

    <Text>Underline</Text>
    <TextField
      v-model="underline"
      :decoration="InputDecoration({ labelText: 'Underline', border: UnderlineInputBorder() })"
    />
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Column,
  Text,
  TextField,
  OutlineInputBorder,
  UnderlineInputBorder,
  InputDecoration,
} from "fluekit";
const outline = ref("");
const underline = ref("");
</script>

Prefix & Suffix

Email

@

.com

Value:

<template>
  <Column :gap="20">
    <TextField
      v-model="email"
      :decoration="{
        labelText: 'Email',
        hintText: 'example@domain.com',
        border: UnderlineInputBorder(),
      }"
    >
      <template #prefix>
        <Text style="color: #888">@</Text>
      </template>
      <template #suffix>
        <Text style="color: #888">.com</Text>
      </template>
    </TextField>

    <Text>Value: {{ email }}</Text>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, TextField, UnderlineInputBorder } from "fluekit";
const email = ref("");
</script>

Icons

Prefix & Suffix Text

Email

mailto:

example

@gmail.com

With Icons

Username

Outside Icon

Search

<template>
  <Column :gap="20">
    <Text :style="TextStyle({ fontSize: 18, fontWeight: FontWeight.bold })"
      >Prefix & Suffix Text</Text
    >
    <TextField
      v-model="email"
      :decoration="
        InputDecoration({
          labelText: 'Email',
          hintText: 'example',
          prefixText: 'mailto:',
          suffixText: '@gmail.com',
          border: OutlineInputBorder(),
          floatingLabelBehavior: FloatingLabelBehavior.always,
        })
      "
    />

    <Text :style="TextStyle({ fontSize: 18, fontWeight: FontWeight.bold })">With Icons</Text>
    <TextField
      v-model="username"
      :decoration="
        InputDecoration({
          labelText: 'Username',
          border: OutlineInputBorder(),
        })
      "
    >
      <template #prefixIcon>
        <Icon :icon="Icons.person" :size="20" color="#666" />
      </template>
      <template #suffixIcon>
        <Icon :icon="Icons.checkCircle" :size="20" color="green" />
      </template>
    </TextField>

    <Text :style="TextStyle({ fontSize: 18, fontWeight: FontWeight.bold })">Outside Icon</Text>
    <TextField
      v-model="search"
      :decoration="
        InputDecoration({
          labelText: 'Search',
          hintText: 'Type to search...',
        })
      "
    >
      <template #icon>
        <Icon :icon="Icons.search" :size="24" color="#666" />
      </template>
    </TextField>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Column,
  Text,
  TextField,
  OutlineInputBorder,
  Icon,
  Icons,
  TextStyle,
  FontWeight,
  InputDecoration,
  FloatingLabelBehavior,
} from "fluekit";

const email = ref("");
const username = ref("");
const search = ref("");
</script>

Filled

Name

<template>
  <Column :gap="20">
    <TextField
      v-model="name"
      :decoration="{
        labelText: 'Name',
        filled: true,
        fillColor: '#f7f7f7',
        border: OutlineInputBorder(),
      }"
    />
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, TextField, OutlineInputBorder } from "fluekit";
const name = ref("");
</script>

States

Read-only、Disabled 与 Error 文本表现。

ReadOnly

Disabled

Error

Too short

<template>
  <Column :gap="20">
    <TextField
      v-model="readonlyValue"
      read-only
      :decoration="{ labelText: 'ReadOnly', border: OutlineInputBorder() }"
    />

    <TextField
      v-model="disabledValue"
      :enabled="false"
      :decoration="{ labelText: 'Disabled', border: OutlineInputBorder() }"
    />

    <TextField
      v-model="errorValue"
      :decoration="{
        labelText: 'Error',
        errorText: errorValue.length < 3 ? 'Too short' : '',
        border: OutlineInputBorder(),
      }"
    />
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, TextField, OutlineInputBorder } from "fluekit";
const readonlyValue = ref("fixed");
const disabledValue = ref("");
const errorValue = ref("");
</script>

Auto Height

Multi-line input can automatically adjust its height based on content by setting auto-grow prop (limited by maxLines).

Auto height TextArea

Description

Length: 0

<template>
  <Column :gap="20">
    <Text>Auto height TextArea</Text>
    <TextArea
      v-model="content"
      auto-grow
      :max-lines="8"
      :decoration="{ labelText: 'Description', border: OutlineInputBorder() }"
    />
    <Text>Length: {{ content.length }}</Text>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, TextArea, OutlineInputBorder } from "fluekit";
const content = ref("");
</script>

API

TextField

Prop	Type	Default	Description
modelValue	string	-	The current text value.
decoration	InputDecoration	-	The decoration to show around the text field.
maxLines	number | null	1	The maximum number of lines to show at one time. If > 1 or null, it becomes a textarea.
maxLength	number	-	The maximum number of characters allowed. Shows a counter if set.
textAlign	string	start	How the text should be aligned horizontally.
textInputAction	string	-	The type of action button to use for the keyboard (e.g., 'enter', 'go', 'search').
textCapitalization	string	none	Configures how the platform should capitalize text (e.g., 'words', 'sentences').
autocorrect	boolean	true	Whether to enable autocorrection.
autoGrow	boolean	false	Whether the input should automatically grow height based on content (only for multiline).
obscureText	boolean	false	Whether to hide the text being edited (e.g., for passwords).
enabled	boolean	true	Whether the text field is enabled.
readOnly	boolean	false	Whether the text can be changed.
style	TextStyle	-	The style to use for the text being edited.

TextArea

Wrapper around TextField with default maxLines and keyboardType.

Prop	Type	Default	Description
maxLines	number	4	Default lines.

InputDecoration

Prop	Type	Description
labelText	string	Text that describes the input field.
hintText	string	Text that suggests what sort of input the field accepts.
helperText	string	Text that provides context about the input field's value, such as how the value will be used.
errorText	string	Text that appears below the field when the input is invalid.
icon	string | Component	An icon that appears before the editable part of the text field and outside the decoration's container.
prefixIcon	string | Component	An icon that appears before the prefix or prefixText and before the editable part of the text field.
suffixIcon	string | Component	An icon that appears after the editable part of the text field and after the suffix or suffixText.
prefixText	string	Text to place before the input.
suffixText	string	Text to place after the input.
border	InputBorder	The border to draw around the field.
enabledBorder	InputBorder	The border to display when the InputDecorator is enabled and is not showing an error.
focusedBorder	InputBorder	The border to display when the InputDecorator has the focus and is not showing an error.
errorBorder	InputBorder	The border to display when the InputDecorator is showing an error.
focusedErrorBorder	InputBorder	The border to display when the InputDecorator has the focus and is showing an error.
disabledBorder	InputBorder	The border to display when the InputDecorator is disabled and is not showing an error.
filled	boolean	If true, the decoration's container is filled with fillColor.
fillColor	string	The color to fill the decoration's container with.
contentPadding	number | number[] | EdgeInsets	The padding for the input decoration's container.
isDense	boolean	Whether the input is part of a dense form (i.e., uses less vertical space).
isCollapsed	boolean	Whether the decoration is the same size as the input field.
floatingLabelBehavior	FloatingLabelBehavior	Defines how the floating label should behave. (always, auto, never)
counterText	string	Optional text to place below the line as a character count.
labelStyle	TextStyle	The style to use for the floating label.
floatingLabelStyle	TextStyle	The style to use for the floating label when it is floating.
hintStyle	TextStyle	The style to use for the hintText.
helperStyle	TextStyle	The style to use for the helperText.
errorStyle	TextStyle	The style to use for the errorText.
counterStyle	TextStyle	The style to use for the counterText.

Helper Functions

OutlineInputBorder

Creates a rounded rectangle outline border.

function OutlineInputBorder(options?: {
  borderSide?: BorderSide;
  borderRadius?: BorderRadius;
}): InputBorder;

UnderlineInputBorder

Creates an underline border.

function UnderlineInputBorder(options?: {
  borderSide?: BorderSide;
  borderRadius?: BorderRadius;
}): InputBorder;