Textarea

A textarea for entering multi-line text.

Nuxt UI

Git

Usage

Use the v-model directive to control the value of the Textarea.

Details

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('The calculation of indicators has been completed')
</script>

<template>
  <B24Textarea v-model="value" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

Details

<script setup lang="ts">
export interface ExampleProps {
  placeholder?: string
}

withDefaults(defineProps<ExampleProps>(), {
  placeholder: 'Type something...'
})
</script>

<template>
  <B24Textarea :placeholder="placeholder" />
</template>

Color

Use the color prop to change the ring color when the Textarea is focused.

INFO

The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Details

<script setup lang="ts">
import type { TextareaProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  color: TextareaProps['color']
  isHighlight?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default',
  isHighlight: true
})
</script>

<template>
  <B24Textarea
    :color="color"
    :highlight="isHighlight"
    placeholder="Enter a company description"
  />
</template>

Tag

Use the tag property to display a small legend on top of the Textarea.

Use the tagColor property to set the color for tag.

Details

<script setup lang="ts">
import type { TextareaProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  tagColor: TextareaProps['tagColor']
  tag?: string
}

withDefaults(defineProps<ExampleProps>(), {
  tagColor: 'default',
  tag: 'info'
})
</script>

<template>
  <B24Textarea
    :tag-color="tagColor"
    :tag="tag"
    placeholder="Enter a company description"
  />
</template>

Disabled

Use the disabled prop to disable the Textarea.

Details

<script setup lang="ts">
export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24Textarea
    :disabled="isDisabled"
    placeholder="Enter a company description"
  />
</template>

Rows

Use the rows prop to set the number of rows. Defaults to 3.

Details

<script setup lang="ts">
export interface ExampleProps {
  rows?: number
}

withDefaults(defineProps<ExampleProps>(), {
  rows: 3
})
</script>

<template>
  <B24Textarea
    :rows="rows"
    placeholder="Enter a company description"
  />
</template>

Autoresize

Use the autoresize prop to enable autoresizing the height of the Textarea.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isAutoresize?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isAutoresize: true
})

const value = ref('Founded in [Year], [Company Name] is a leading food manufacturing company dedicated to producing high-quality, nutritious, and delicious food products. With a commitment to excellence and innovation, we have established ourselves as a trusted name in the food industry.')
</script>

<template>
  <B24Textarea
    v-model="value"
    :autoresize="isAutoresize"
  />
</template>

Use the maxrows prop to set the maximum number of rows when autoresizing. If set to 0, the Textarea will grow indefinitely.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isAutoresize?: boolean
  maxrows?: number
}

withDefaults(defineProps<ExampleProps>(), {
  isAutoresize: true,
  maxrows: 4
})

const value = ref('Founded in [Year], [Company Name] is a leading food manufacturing company dedicated to producing high-quality, nutritious, and delicious food products. With a commitment to excellence and innovation, we have established ourselves as a trusted name in the food industry.')
</script>

<template>
  <B24Textarea
    v-model="value"
    :rows="3"
    :maxrows="maxrows"
    :autoresize="isAutoresize"
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
modelValue		string | number
id		string
name		string
placeholder		string The placeholder text when the textarea is empty.
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
noPadding		boolean Removes padding from input.
noBorder		boolean removes all borders (rings).
underline		boolean removes all borders (rings) except the bottom one.
rounded		boolean Rounds the corners of the button.
required		boolean
autofocus		boolean
autofocusDelay	0	number
disabled		boolean
rows	3	number
maxrows	5	number
autoresize		boolean
tag		string
tagColor		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
highlight		boolean Highlight the ring color like a focus state.
b24ui		PartialString<{ root: string; base: string; tag: string; }>

Slots

Slot	Type
default	{}

Emits

Event	Type

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
textareaRef	Ref<HTMLTextAreaElement | null>