TextArea

Multi-line text input that allows manual resizing.

This form element is useful when you want to create a sizeable amount of free-form text, for example comments, reviews, feedback, or short essay responses.

v-model is used to track the current value of the textarea. See the events docs for details on emitted events and their properties.

Attributes passed to textarea

This component will pass any HTML attributes applied to it, except for CSS class, to the <textarea> element within the component.

Demos

Configurable

Name	Value
Props
status	default error
autosize
startIcon
endIcon
placeholder
disabled
readonly
rows
View
Reading direction	Left to right (LTR) Right to left (RTL)
Note: For icon properties, the relevant icon also needs to be imported from the `@wikimedia/codex-icons` package. See the usage documentation for more information.

Default

The TextArea component uses v-model to two-way bind the reactive reference to the value of <textarea>. The reactive reference will automatically update when the value changes in the <textarea>. The value updates due to an emitted input event.

By default, the initial value of the autosize prop is false. When autosize is false, the textarea will display a grabber/resize tool and a scrollbar to view the overflow content. The <textarea> can be manually resized vertically to increase height of the element.

Note: The initial min-height of the <textarea> is set to 64px.

Browser Support Warning

While our design system strives to provide a consistent experience across different platforms and browsers, it's important to be aware that the vertical resizing feature will not be available on iOS devices, including iPhones and iPads. This limitation is due to the default behavior of iOS Safari.

With placeholder

We passed in a native attribute, placeholder, to hint to users what to enter into the control.

Note: Placeholders are not a substitute for a proper <label> element tied to the control.

With rows

This example demonstrates how to pass in the native attribute, rows, to the <textarea>.

The rows attribute takes a positive number which represents the number of text lines to display in the control.

With autosize

When the autosize prop is set to true, the TextArea automatically grows with the height of the content inside <textarea>.

The grabber/resize tool is not displayed when autosize is set to true.

With icons

TextArea can pass in a start icon and end icon as props. This example shows how to add icons to the component. Also see Icon.

With disabled

You can disable the component by adding the disabled attribute.

When <textarea> is disabled, the user cannot interact with the control. Users cannot click or select in the control and the form cannot be submitted.

With readonly

You can make the component readonly by adding the readonly attribute.

When <textarea> is readonly, the user cannot modify the value of the control. Some key differences between disabled and readonly is that readonly does not prevent users from selecting and clicking in the form. Users can highlight and copy content in readonly. Readonly is tabbable and the form can be submitted.

One example usage of readonly textarea is when you want to prevent a user from typing into the textarea until a condition is met like selecting a a checkbox. In this situation, when the condition is met we can use JavaScript to remove the readonly to make the textarea editable.

The textarea is readonly.

Form field

A TextArea can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. See the Field page for more information.

Edit summary Briefly describe your changes

By saving changes, you agree to the Terms of Use, and you irrevocably agree to release your contribution under the CC BY-SA 4.0 License and the GFDL. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.

NPMMediaWiki

vue

<template>
	<cdx-field>
		<cdx-text-area v-model="textareaValue" placeholder="Describe what you changed" />
		<template #label>
			Edit summary
		</template>
		<template #description>
			Briefly describe your changes
		</template>
		<template #help-text>
			By saving changes, you agree to the
			<a href="https://foundation.wikimedia.org/wiki/Policy:Terms_of_Use">Terms of Use</a>,
			and you irrevocably agree to release your contribution under the
			<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0 License</a>
			and the
			<a href="https://en.wikipedia.org/wiki/Wikipedia:Text_of_the_GNU_Free_Documentation_License">GFDL</a>.
			You agree that a hyperlink or URL is sufficient attribution under the Creative Commons
			license.
		</template>
	</cdx-field>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { CdxTextArea, CdxField } from '@wikimedia/codex';

export default defineComponent( {
	name: 'TextAreaField',
	components: { CdxTextArea, CdxField },
	setup() {
		const textareaValue = ref( '' );

		return {
			textareaValue
		};
	}
} );
</script>

vue

<template>
	<cdx-field>
		<cdx-text-area v-model="textareaValue" placeholder="Describe what you changed"></cdx-text-area>
		<template #label>
			Edit summary
		</template>
		<template #description>
			Briefly describe your changes
		</template>
		<template #help-text>
			By saving changes, you agree to the
			<a href="https://foundation.wikimedia.org/wiki/Policy:Terms_of_Use">Terms of Use</a>,
			and you irrevocably agree to release your contribution under the
			<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0 License</a>
			and the
			<a href="https://en.wikipedia.org/wiki/Wikipedia:Text_of_the_GNU_Free_Documentation_License">GFDL</a>.
			You agree that a hyperlink or URL is sufficient attribution under the Creative Commons
			license.
		</template>
	</cdx-field>
</template>

<script>
const { defineComponent, ref } = require( 'vue' );
const { CdxTextArea, CdxField } = require( '@wikimedia/codex' );

// @vue/component
module.exports = defineComponent( {
	name: 'TextAreaField',
	components: { CdxTextArea, CdxField },
	setup() {
		const textareaValue = ref( '' );

		return {
			textareaValue
		};
	}
} );
</script>

Usage

Props

Prop name	Description	Type	Values	Default
`modelValue`	Current value of the textarea. Provided by `v-model` binding in the parent component.	`string`	-	`''`
`status`	`status` attribute of the textarea.	`ValidationStatusType`	`'default'`, `'error'`	`'default'`
`disabled`	Whether the textarea is disabled.	`boolean`	-	`false`
`autosize`	Describes whether the textarea grows vertically to show all text. When autosize is true, the textarea automatically grows in height (vertically). The height of the textarea expands while the user types in the textarea. The content inside the textarea is visible and there's no scroll.	`boolean`	`true`, `false`	`false`
`startIcon`	An icon at the start of the textarea element. Similar to a `::before` pseudo-element.	`Icon\|undefined`	-	`undefined`
`endIcon`	An icon at the end of the textarea element. Similar to an `::after` pseudo-element.	`Icon\|undefined`	-	`undefined`

Events

Event name	Properties	Description
`update:modelValue`	modelValue `string` - The new model value	When the textarea value changes.

TextArea ​

Demos ​

Configurable ​

Default ​

With placeholder ​

With rows ​

With autosize ​

With icons ​

With disabled ​

With readonly ​

Form field ​

Usage ​

Props ​

Events ​