Appearance
Input
The FTInput component replaces the standard html input with a design theme and a multitude of options.
Usage
Inputs in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTInput } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTInput } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTInput } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTInput
}
}
</script><script>
import { FTInput } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTInput
}
}
</script>Text
INFO
vue
<template>
<FTInput label="Disabled" disabled />
<FTInput label="Label" />
<FTInput label="CTAs">
<template #ctas>
<FTButton iconOnly iconSmall icon="fad rocket-launch" />
<FTButton iconOnly iconSmall icon="fas wand-magic-sparkles" />
</template>
</FTInput>
<FTInput label="Captions">
<template #captionLeft>caption-l</template>
<template #captionRight>caption-r</template>
</FTInput>
<FTInput label="Suffix">
<template #suffix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput label="Prefix">
<template #prefix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput label="Pre icon" preIcon="fas magnifying-glass" />
</template><template>
<FTInput label="Disabled" disabled />
<FTInput label="Label" />
<FTInput label="CTAs">
<template #ctas>
<FTButton iconOnly iconSmall icon="fad rocket-launch" />
<FTButton iconOnly iconSmall icon="fas wand-magic-sparkles" />
</template>
</FTInput>
<FTInput label="Captions">
<template #captionLeft>caption-l</template>
<template #captionRight>caption-r</template>
</FTInput>
<FTInput label="Suffix">
<template #suffix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput label="Prefix">
<template #prefix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput label="Pre icon" preIcon="fas magnifying-glass" />
</template>Textarea
INFO
vue
<template>
<FTInput type="textarea" label="Disabled" disabled />
<FTInput type="textarea" label="Label" />
<FTInput type="textarea" label="CTAs">
<template #ctas>
<FTButton iconOnly iconSmall icon="fad rocket-launch" />
<FTButton iconOnly iconSmall icon="fas wand-magic-sparkles" />
</template>
</FTInput>
<FTInput type="textarea" label="Captions">
<template #captionLeft>caption-l</template>
<template #captionRight>caption-r</template>
</FTInput>
<FTInput type="textarea" label="Suffix">
<template #suffix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput type="textarea" label="Prefix">
<template #prefix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput type="textarea" label="Pre icon" preIcon="fas magnifying-glass" />
</template><template>
<FTInput type="textarea" label="Disabled" disabled />
<FTInput type="textarea" label="Label" />
<FTInput type="textarea" label="CTAs">
<template #ctas>
<FTButton iconOnly iconSmall icon="fad rocket-launch" />
<FTButton iconOnly iconSmall icon="fas wand-magic-sparkles" />
</template>
</FTInput>
<FTInput type="textarea" label="Captions">
<template #captionLeft>caption-l</template>
<template #captionRight>caption-r</template>
</FTInput>
<FTInput type="textarea" label="Suffix">
<template #suffix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput type="textarea" label="Prefix">
<template #prefix>
<FTIcon
icon="fad circle-info"
:style="{ color: '#63B6E6' }"
/>
</template>
</FTInput>
<FTInput type="textarea" label="Pre icon" preIcon="fas magnifying-glass" />
</template>Numeric
INFO
vue
<template>
<FTInput type="number" label="Integer" />
<FTInput type="number" max="100" min="0" label="Integer 0 to 100" />
<FTInput type="number" max="100" min="-100" step="10" label="Integer -100 to 100 step=10" />
<FTInput type="number" isDouble label="Double" />
<FTInput type="number" max="10" min="0" isDouble step="0.1" label="Double 0 to 10 step=0.1" />
<FTInput type="number" max="100" min="0" isDouble step="0.01" label="Double 0 to 100 step=0.01" />
</template><template>
<FTInput type="number" label="Integer" />
<FTInput type="number" max="100" min="0" label="Integer 0 to 100" />
<FTInput type="number" max="100" min="-100" step="10" label="Integer -100 to 100 step=10" />
<FTInput type="number" isDouble label="Double" />
<FTInput type="number" max="10" min="0" isDouble step="0.1" label="Double 0 to 10 step=0.1" />
<FTInput type="number" max="100" min="0" isDouble step="0.01" label="Double 0 to 100 step=0.01" />
</template>Props
In order to modify the default behaviour FTInput accepts custom helper props:
| Name | Default | Description |
|---|---|---|
type | text | Display a text input or a textarea |
label | '' | Label text |
disabled | false | Disable the input field |
modelValue | '' | The value of the input field |
maxLength | '' | Maximum number of characters allowed |
min | '' | Minimum value for numeric input |
max | '' | Maximum value for numeric input |
autocomplete | on | Enable or disable autocomplete |
allowedInput | null | Restrict input to certain characters |
debounceTime | 0 | Debounce time in milliseconds |
isDouble | false | Allow double values |
step | 1 | Controls the step size (numeric inputs) |
slugify | false | Convert input to a URL-friendly format |
slugifyChar | null | Character to replace spaces in slugified input |
invalidFormatError | This field has an invalid format | Error message for invalid format |
preIcon | null | Icon to display before the input field |
rows | 2 | Number of rows for textarea input |
placeholder | '' | Placeholder text |
focusBorder | true | Show border on focus |
readOnly | false | Make the input field read-only |
fullWidth | false | Make the input field take full width |