Flux

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-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>

Max length

A text area capped with max-length.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTextArea
                v-model="value"
                :max-length="120"
                placeholder="Write a short bio (max 120 characters)"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

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

Disabled

A disabled text area.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTextArea
                v-model="value"
                disabled
                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>

Invalid

A text area with an error message.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    label="Message"
                    error="Please tell us why you are contacting us.">
                    <FluxFormTextArea
                        v-model="value"
                        placeholder="Why are you contacting us?"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

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

Read-only

A read-only text area showing prefilled content.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormTextArea
                v-model="value"
                is-readonly/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const value = ref('This content is read-only and cannot be edited.');
</script>