Flux

Appearance

Text area ​

A form text area is a text field that may have multiple lines of text. It is used for longer text and can be used within a contact form to ask for a question.

Props

model-value: string
The value of the textarea.

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

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

disabled?: boolean
If the textarea is disabled.

error?: string | null
Error message describing why the textarea is invalid. Sets aria-invalid and a red border.

is-condensed?: boolean
Renders the textarea in a compact style with reduced padding.

is-loading?: boolean
Marks the textarea as loading.

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

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

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

name?: string
The name attribute of the underlying textarea element.

placeholder?: string
The placeholder of the textarea.

rows?: number
The number of rows of the textarea.
Default: 3

Emits

update:model-value: [string]
Triggered when the value is changed.

blur: []
Triggered when the textarea loses focus.

focus: []
Triggered when the textarea gains focus.

Examples ​

Basic

A basic text area.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTextArea
                v-model="value"
                placeholder="Why are you contacting us?"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const value = ref('');
</script>

Multiple rows

A text area with multiple rows

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTextArea
                v-model="value"
                :rows="5"
                placeholder="Why are you contacting us?"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const value = ref('');
</script>