TextareaField

Component

Props

Usage

id

Sets the id of the field.

 <template>
    <TextareaField id="field-id" />
</template>
 

• Type: string
• Required: true

label

Sets the label of the field.

 <template>
    <TextareaField label="Label text" />
</template>
 

• Type: string

placeholder

Sets the placeholder text of the input field.

 <template>
    <TextareaField placeholder="Placeholder" />
</template>
 

• Type: string
• Default: 'Placeholder'

helpText

Sets the help text displayed below the input field.

 <template>
    <TextareaField helpText="Help text example" />
</template>
 

• Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <TextareaField helpTextPosition="top" helpText="Appears above the field" />
</template>
 

• Type: Position
• Default: Position.BOTTOM

Options

modelValue

Sets the value of the textarea.

 <template>
    <TextareaField v-model="textValue" />
</template>
<script setup lang="ts">
const textValue = ref('Sample text');
</script>
 

• Type: string
• Default: ''

validator

Sets the validator function for the field, which controls its internal validation state.

It uses the validateField utility to perform required field validation.

 <template>
    <TextareaField :validator="validateField" />
</template>
 

• Type: function
• Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <TextareaField v-model:error="errorMessage" />
</template>
 

• Type: string
• Default: ''

maxLength

Sets the maximum length of the textarea.

 <template>
    <TextareaField :maxLength="500" />
</template>
 

• Type: number
• Required: true

hasCharCounter

Enables or disables the character counter display.

 <template>
    <TextareaField hasCharCounter />
</template>
 

• Type: boolean
• Default: true

readonly

Sets the textarea to read-only mode.

 <template>
    <TextareaField readonly />
</template>
 

• Type: boolean
• Default: false

autocomplete

Sets the autocomplete attribute of the textarea.

 <template>
    <TextareaField autocomplete="off" />
</template>
 

• Type: string
• Default: 'off'

autofocus

Sets the autofocus state of the field.

 <template>
    <TextareaField autofocus />
</template>
 

• Type: boolean
• Default: false

wrap

Sets the wrap attribute of the textarea.

 <template>
    <TextareaField wrap="soft" />
</template>
 

• Type: 'soft' | 'hard'
• Default: 'soft'

spellcheck

Sets the spellcheck attribute of the textarea.

 <template>
    <TextareaField spellcheck />
</template>
 

• Type: boolean
• Default: false

autoResize

Enables or disables the auto-resize feature of the textarea. It does not refer to the native resize property of the textarea, but to automatically adjusting the height based on the content.

 <template>
    <TextareaField autoResize />
</template>
 

• Type: boolean
• Default: false

blurContent

Enables or disables the blur effect on the content of the textarea.

 <template>
    <TextareaField blurContent />
</template>
 

• Type: boolean
• Default: false

Security note

To prevent sensitive information from being exposed, consider using other security measures such as encryption or secure storage.

Additionally, you can handle the value of v-model dynamically:

 <template>
    <TextareaField
        id="protected-field"
        v-model="protectedValue"
        v-model:blurContent="isBlurred"
    />
</template>

<script setup lang="ts">
const protectedValue = ref('')
const isBlurred = ref(true)

// Example reveal logic
const revealValue = async () => {
    const decrypted = await fetchSecret()
    protectedValue.value = decrypted
    isBlurred.value = false
}
</script>
 

revealBlurOnFocus

Controls whether the blur effect is revealed when the textarea is focused.

 <template>
    <TextareaField revealBlurOnFocus />
</template>
 

• Type: boolean
• Default: true

disabled

Sets the disabled state of the field.

 <template>
    <TextareaField disabled />
</template>
 

• Type: boolean
• Default: false

required

Sets the required state of the field.

 <template>
    <TextareaField required />
</template>
 

• Type: boolean
• Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <TextareaField label="Notes" :showOptionalLabel="false" />
</template>
 

• Type: boolean
• Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <TextareaField label="Notes" optionalLabel="(not required)" />
</template>
 

• Type: string

minHeightClass

Sets the minimum height CSS class for the textarea.

 <template>
    <TextareaField minHeightClass="min-h-[150px]" />
</template>
 

• Type: string
• Default: 'min-h-[150px]'

maxHeightClass

Sets the maximum height CSS class for the textarea.

 <template>
    <TextareaField maxHeightClass="max-h-[300px]" />
</template>
 

• Type: string
• Default: 'max-h-[300px]'

textareaClass

Sets the custom CSS class for the textarea.

 <template>
    <TextareaField textareaClass="border-border-success" />
</template>
 

• Type: string

transparent

When true, removes the default bg-background-container-surface background from the textarea container, making it transparent.

 <template>
    <TextareaField transparent />
</template>
 

• Type: boolean
• Default: false