ipl-input

View Source

<ipl-input
    v-model="inputValue"
    label="Input"
    placeholder="Placeholder"
    name="input-example"
    :disabled="disabled"
    :loading="loading"
    :centered="centered"
/>

Large theme

View Source

<ipl-input
    v-model="inputValue"
    placeholder="Search for a player..."
    name="input-example"
    :disabled="disabled"
    :loading="loading"
    theme="large"
    type="search"
/>

Prefix/Suffix

View Source

<ipl-input
    v-model="inputValue"
    name="input-example"
    type="number"
    extra="seconds"
    :loading="loading"
/>
<ipl-input
    v-model="prefixedInputValue"
    label="Input with prefix"
    name="input-example"
    prefix="/test/"
    :loading="loading"
/>
<ipl-input
    v-model="inputValue"
    name="input-example"
    type="number"
    extra="seconds"
    theme="large"
    :loading="loading"
/>
<ipl-input
    v-model="prefixedInputValue"
    label="Input with prefix"
    name="input-example"
    prefix="/test/"
    theme="large"
    :loading="loading"
/>

Formatter

View Source

<ipl-input
    v-model="inputValue"
    label="Input"
    name="input-example"
    :formatter="(value: string) => value.substring(0, 10)"
/>

Validation

View Source

<template>
    <div class="vertical-layout">
        <div>
            {{ valid ? 'All inputs are valid' : 'Some inputs are invalid' }}
        </div>
        <ipl-input
            v-model="firstInputValue"
            label="Input (Error if value is not numeric)"
            name="firstInput"
        />
        <ipl-input
            v-model="secondInputValue"
            label="Input (Error if value is too long)"
            name="secondInput"
        />
    </div>
</template>

<script setup lang="ts">
import { IplInput, maxLength, numeric, provideValidators, validator } from '../../src';
import { ref } from 'vue';

const firstInputValue = ref('999');
const secondInputValue = ref('Test Value');

const { allValid: valid } = provideValidators({
    firstInput: validator(true, numeric),
    secondInput: validator(true, maxLength(10)),
});
</script>

Color Input

View Source

<ipl-input
    v-model="inputValue"
    label="Color Input"
    type="color"
    name="colorInput"
    :disabled="disabled"
/>