Textarea

A textarea for entering multi-line text.

Nuxt UI

Git

Demo

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>

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>

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>

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>

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/types/index.ts'

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/types/index.ts'

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>

Icon

Use the icon prop to show an @bitrix24/b24icons inside the Textarea.

Details

<script setup lang="ts">
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'
</script>

<template>
  <B24Textarea
    :icon="CrmSearchIcon"
    placeholder="Search..."
    :rows="1"
    autoresize
  />
</template>

Use the leading-icon and trailing-icon props to set a different icon for each position.

Details

<script setup lang="ts">
import TaskIcon from '@bitrix24/b24icons-vue/button/TaskIcon'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Textarea
    :icon="RocketIcon"
    :trailing-icon="TaskIcon"
    placeholder="Search..."
    :rows="1"
    autoresize
  />
</template>

Avatar

Use the avatar prop to show an Avatar inside the Textarea.

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
  <B24Textarea
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
    placeholder="Search..."
    :rows="1"
    autoresize
  />
  <B24Textarea
    :avatar="{ icon: Bitrix24Icon }"
    placeholder="Search..."
    :rows="1"
    autoresize
  />
</template>

Loading

Use the loading prop to show a loading icon on the Textarea.

Details

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

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

<template>
  <B24Textarea
    placeholder="Search..."
    :loading="isLoading"
    :rows="1"
    autoresize
  />
</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>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
id		string
name		string
placeholder		string The placeholder text when the textarea is empty
color	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
noPadding	false	boolean Removes padding from input
noBorder	false	boolean Removes all borders (rings)
underline	false	boolean Removes all borders (rings) except the bottom one
rounded	false	boolean Rounds the corners of the button
required	false	boolean
autofocus	false	boolean
autofocusDelay	0	number
autoresize	false	boolean
autoresizeDelay	0	number
disabled	false	boolean
rows	3	number
maxrows	5	number
tag		string
tagColor	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
highlight	false	boolean Highlight the ring color like a focus state
b24ui		{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; }
icon	icons.loading	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the left side.
avatar		AvatarProps Display an avatar on the left side.
loading		boolean When `true`, the loading icon will be displayed.
trailing		boolean When `true`, the icon will be displayed on the right side.
trailingIcon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the right side.
modelValue		null | string | number

Slots

Slot	Type
leading	{}
default	{}
trailing	{}

Emits

Event	Type

Expose

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

Name	Type
textareaRef	Ref<HTMLTextAreaElement | null>