InputDecoration

The InputDecoration class is used to configure the visual appearance of input fields, such as TextField. It allows you to define labels, borders, icons, hints, error messages, and more.

Usage

Pass an InputDecoration object to the decoration prop of a TextField component.

Basic Decoration

Username

Username must be unique

Borders

Outline Border

Outline

Underline Border (Default)

Underline

No Border

No Border

Icons

With Icons

Floating Label Behavior

Always

Always Floating

Never

Never Floating

Error State

Invalid input value

Prefix & Suffix Text

Price

$

USD

Filled & Custom Color

Filled Input

Dense

Dense Input

Code Example

<template>
  <div class="demo-container">
    <h2>Basic Decoration</h2>
    <div class="example-section">
      <TextField
        v-model="text1"
        :decoration="
          InputDecoration({
            labelText: 'Username',
            hintText: 'Enter your username',
            helperText: 'Username must be unique',
          })
        "
      />
    </div>

    <h2>Borders</h2>
    <div class="example-section">
      <h3>Outline Border</h3>
      <TextField
        v-model="text2"
        :decoration="
          InputDecoration({
            labelText: 'Outline',
            border: OutlineInputBorder(),
          })
        "
      />

      <h3>Underline Border (Default)</h3>
      <TextField
        v-model="text3"
        :decoration="
          InputDecoration({
            labelText: 'Underline',
            border: UnderlineInputBorder(),
          })
        "
      />

      <h3>No Border</h3>
      <TextField
        v-model="text4"
        :decoration="
          InputDecoration({
            labelText: 'No Border',
            border: InputBorder.none,
          })
        "
      />
    </div>

    <h2>Icons</h2>
    <div class="example-section">
      <TextField
        v-model="text5"
        :decoration="
          InputDecoration({
            labelText: 'With Icons',
            icon: Icons.person,
            prefixIcon: Icons.person,
            suffixIcon: Icons.checkCircle,
            border: OutlineInputBorder(),
          })
        "
      />
    </div>

    <h2>Floating Label Behavior</h2>
    <div class="example-section">
      <h3>Always</h3>
      <TextField
        v-model="text6"
        :decoration="
          InputDecoration({
            labelText: 'Always Floating',
            floatingLabelBehavior: FloatingLabelBehavior.always,
            border: OutlineInputBorder(),
          })
        "
      />

      <h3>Never</h3>
      <TextField
        v-model="text7"
        :decoration="
          InputDecoration({
            labelText: 'Never Floating',
            floatingLabelBehavior: FloatingLabelBehavior.never,
            border: OutlineInputBorder(),
          })
        "
      />
    </div>

    <h2>Error State</h2>
    <div class="example-section">
      <TextField
        v-model="text8"
        :decoration="
          InputDecoration({
            labelText: 'Error Input',
            errorText: 'Invalid input value',
            border: OutlineInputBorder(),
          })
        "
      />
    </div>

    <h2>Prefix & Suffix Text</h2>
    <div class="example-section">
      <TextField
        v-model="text9"
        :decoration="
          InputDecoration({
            labelText: 'Price',
            prefixText: '$',
            suffixText: 'USD',
            border: OutlineInputBorder(),
          })
        "
      />
    </div>

    <h2>Filled & Custom Color</h2>
    <div class="example-section">
      <TextField
        v-model="text10"
        :decoration="
          InputDecoration({
            labelText: 'Filled Input',
            filled: true,
            fillColor: Colors.grey200,
            border: OutlineInputBorder({
              borderSide: BorderSide({ style: 'none', width: 0 }),
              borderRadius: BorderRadius.circular(8),
            }),
          })
        "
      />
    </div>

    <h2>Dense</h2>
    <div class="example-section">
      <TextField
        v-model="text11"
        :decoration="
          InputDecoration({
            labelText: 'Dense Input',
            isDense: true,
            border: OutlineInputBorder(),
          })
        "
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  TextField,
  InputDecoration,
  OutlineInputBorder,
  UnderlineInputBorder,
  InputBorder,
  Icons,
  Colors,
  FloatingLabelBehavior,
  BorderSide,
  BorderRadius,
} from "fluekit";

const text1 = ref("");
const text2 = ref("");
const text3 = ref("");
const text4 = ref("");
const text5 = ref("");
const text6 = ref("");
const text7 = ref("");
const text8 = ref("Wrong Value");
const text9 = ref("");
const text10 = ref("");
const text11 = ref("");
</script>

<style scoped>
.demo-container {
  padding: 20px;
  max-width: 600px;
}

.example-section {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h2 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: bold;
}

h3 {
  margin-bottom: 8px;
  font-size: 16px;
  color: #666;
}
</style>

Properties

Property	Type	Description
labelText	string	Text that describes the input field.
labelStyle	TextStyle	Style for the label text.
helperText	string	Text that provides context about the input's value, such as how the value will be used.
helperStyle	TextStyle	Style for the helper text.
hintText	string	Text that suggests what sort of input the field accepts.
hintStyle	TextStyle	Style for the hint text.
errorText	string	Text that appears below the input when the input content is invalid.
errorStyle	TextStyle	Style for the error text.
prefixIcon	string	An icon that appears before the prefix or input text, inside the border.
prefixText	string	Text that appears before the input text, inside the border.
suffixIcon	string	An icon that appears after the suffix or input text, inside the border.
suffixText	string	Text that appears after the input text, inside the border.
counterText	string	Text to place below the line as a character count.
filled	boolean	Whether the decoration's container is filled with fillColor.
fillColor	Color	The color to fill the decoration's container with, if filled is true.
border	InputBorder	The border to display when the InputDecorator does not have the focus and is not showing an error.
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.
contentPadding	EdgeInsets	The padding for the input decoration's container.
isDense	boolean	Whether the input decoration is dense.
floatingLabelBehavior	FloatingLabelBehavior	Defines how the floating label behaves.
icon	string	An icon to show before the input field and outside of the decoration's container.

Borders

The border property (and related properties like enabledBorder, focusedBorder, etc.) accepts an InputBorder object. You can create these objects using helper functions or use the pre-defined none constant.

OutlineInputBorder

Creates a rounded rectangle border.

InputDecoration({
  border: OutlineInputBorder({
    borderRadius: BorderRadius.circular(8),
    borderSide: BorderSide({ color: Colors.blue, width: 2 }),
  }),
});

UnderlineInputBorder

Creates a horizontal line at the bottom. This is the default border type for TextField.

InputDecoration({
  border: UnderlineInputBorder({
    borderSide: BorderSide({ color: Colors.grey, width: 1 }),
  }),
});

InputBorder.none

Removes the border completely.

InputDecoration({
  border: InputBorder.none,
});

FloatingLabelBehavior

• auto: The label floats when the input is focused or has content. (Default)
• always: The label always floats above the input.
• never: The label never floats.