Skip to content
On this page

Textarea

Augmented textarea form field.

Usage

See using components for detailed instructions.

js
import { CTextarea } from 'chusho';

Config

The options below are to be set in the global configuration at the following location:

js
{
  components: {
    textarea: {
      class({ required, disabled, readonly, modelValue, variant }) => {},
    },
  },
}

class

Classes applied to the textarea element, except when the prop bare is set to true. See styling components.

  • type: Array<String | Object> | Object | String | (props: Object) => {}
  • default: null

Example

js
class: 'field field--textarea'

API

NameTypeDefaultDescription
Props
variant string|array|objectundefined

Useful when used in the component config class option, to style it conditionally. See styling components.

bare booleanfalse

Disable class inheritance from the component config. See styling components.

disabled booleannull

Set the HTML disabled attribute

required booleannull

Set the HTML required attribute

readonly booleannull

Set the HTML readonly attribute

modelValue string|numbernull

Textarea value

Events
update:modelValue
When the textarea value changes.
ArgumentTypeDescription
modelValuestring

The textarea value.

Examples

Controlled

vue
<template>
  <CTextarea v-model="value" />
</template>

<script>
export default {
    data() {
        return {
            value: 'Default value',
        },
    },
}
</script>

Released under the MIT License.