Appearance
Floating Label
The FTFloatingLabel component is a Vue component designed to create floating label inputs.
Usage
To use the FTFloatingLabel component, import it and register it in your Vue app.
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const myValue = ref('');
</script><script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const myValue = ref('');
</script>Input
INFO
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const myValue = ref('');
</script>
<template>
<FTFloatingLabel v-model="myValue" label="My Floating Label">
<template #default="{ inputValue, inputEvent }">
<input :value="inputValue" @input="inputEvent"/>
</template>
</FTFloatingLabel>
</template><script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const myValue = ref('');
</script>
<template>
<FTFloatingLabel v-model="myValue" label="My Floating Label">
<template #default="{ inputValue, inputEvent }">
<input :value="inputValue" @input="inputEvent"/>
</template>
</FTFloatingLabel>
</template>Select
INFO
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const gender = ref('Male');
</script>
<template>
<FTFloatingLabel v-model="myValue" label="Gender">
<template #default="{ inputValue, inputEvent }">
<textarea class="form-input" :value="inputValue" @input="inputEvent"/>
</template>
</FTFloatingLabel>
</template><script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const gender = ref('Male');
</script>
<template>
<FTFloatingLabel v-model="myValue" label="Gender">
<template #default="{ inputValue, inputEvent }">
<textarea class="form-input" :value="inputValue" @input="inputEvent"/>
</template>
</FTFloatingLabel>
</template>Textarea
INFO
vue
<script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const myValue = ref('');
</script>
<template>
<FTFloatingLabel v-model="myValue" label="My Textarea Label">
<template #default="{ inputValue, inputEvent }">
<textarea :value="inputValue" @input="inputEvent"/>
</template>
</FTFloatingLabel>
</template><script setup lang="ts">
import { ref } from 'vue';
import { FTFloatingLabel } from '@fasttrack-solutions/vue-components-lib';
const myValue = ref('');
</script>
<template>
<FTFloatingLabel v-model="myValue" label="My Textarea Label">
<template #default="{ inputValue, inputEvent }">
<textarea :value="inputValue" @input="inputEvent"/>
</template>
</FTFloatingLabel>
</template>Props
Props The following props are available for the FTFloatingLabel component:
| Name | Default | Description |
|---|---|---|
modelValue | '' | The current value of the input. |
label | '' | The label that appears above the input. |
noLabel | false | A Boolean value that determines whether the label is displayed. If set to true, the label will not be displayed |
isRequired | false | A Boolean value that determines whether the input is required. |
Events
The following event is emitted by the FTFloatingLabel component:
update:modelValue:
| Name | Description |
|---|---|
update:modelValue | Emitted when the value of the input changes. |
Slots
The FTFloatingLabel component has one slot, which is used to provide custom input elements.
| Name | Props | Description |
|---|---|---|
default | inputValue: string or number. inputEvent: function | This slot is used to pass in the input field. The inputValue prop will be set to the modelValue prop, and the inputEvent prop will be set to the handleInput function. |
Styling
The FTFloatingLabel component can be styled using the following CSS classes:
| Class | Description |
|---|---|
.ft-floating-label | The container element that wraps the input field and the label. |
.ft-floating-label--dirty | Applied when the input field has a value. |
.ft-floating-label--disabled | Applied when the input field is disabled. |
.ft-floating-label--with-label | Applied when a label is provided. |
.ft-floating-label__label | The label element. |
Example
css
:root {
--color-floating-label-idle: #ddd;
--color-floating-label-active: blue;
--color-input-label-idle: #aaa;
--color--floating-label-input-disabled: #ccc;
}:root {
--color-floating-label-idle: #ddd;
--color-floating-label-active: blue;
--color-input-label-idle: #aaa;
--color--floating-label-input-disabled: #ccc;
}