Flux

Appearance

Input ​

A form input is a text field that consists of a single line. It accepts various data types that can be specified using the type prop.

Required icons

eye
eye-slash

Props

model-value: object | string | number | null
The value of the input.

auto-complete?: FluxAutoCompleteType
Please refer to the HTMLInputElement documentation for examples of values that can be given here.

auto-focus?: boolean
Focus the input when the form is mounted.

icon-leading?: FluxIconName
The icon at the start of the input.

icon-trailing?: FluxIconName
The icon at the end of the input.

disabled?: boolean
If the input is disabled.

is-condensed?: boolean
??

is-readonly?: boolean
If the input is readonly.

is-secondary?: boolean
If the field is secondary and is rendered in an alternative style.

max?: string | number
The maximum value of the input.

max-length?: number
The maximum value length of the input.

min?: string | number
The minimum value of the input.

pattern?: FluxInputMask
The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true.

placeholder?: string
The placeholder of the input.

step?: number
The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.

type?: FluxInputType
The type of the input.
Default: text

Emits

update:model-value: [object, string, number, null]
Triggered when the value is changed.

blur: []
Triggered when the input loses focus.

focus: []
Triggered when the input receives focus.

Examples ​

Basic

A basic form input.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxForm>
                <FluxFormInput
                    placeholder="Any input here!"/>
            </FluxForm>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Icon

Form input with an icon.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxForm>
                <FluxFormInput
                    icon-leading="user"
                    placeholder="Put your username here!"/>
            </FluxForm>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Password

A password form input.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxForm>
                <FluxFormInput
                    type="password"
                    v-model="password"/>
            </FluxForm>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { ref } from 'vue';
    import { FluxForm, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';

    const password = ref('KOj87o2#5D1+N@3UextA');
</script>

Pattern

A form input with a pattern.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxForm>
                <FluxFormInput
                    pattern="iban"
                    placeholder="NL12 ABNA 0123 4567 89"/>
            </FluxForm>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormInput, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used components ​