TextField & TextArea

Material Design text fields that allow users to enter text.

Basic Usage

Username

Password

🔒

Username:

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

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

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

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, TextField, OutlineInputBorder } 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:

No label, no hint:

Underline border without label:

<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="{ labelText: 'Outline', border: OutlineInputBorder() }"
    />

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

<script setup lang="ts">
import { ref } from "vue";
import { Column, Text, TextField, OutlineInputBorder, UnderlineInputBorder } 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>

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.
errorText	string	Text that appears below the field when the input is invalid.
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.
filled	boolean	If true, the decoration's container is filled with fillColor.
fillColor	string	The color to fill the decoration's container with.

Helper Functions

• OutlineInputBorder({ borderSide?, borderRadius? })
• UnderlineInputBorder({ borderSide?, borderRadius? })