Textarea

CTextArea adds styling and auto-resize functionality to standard textarea element.

Basic

CTextArea is used with the v-model property for two-way value binding.

<template>
  <CTextarea 
      v-model="value" 
      rows="5" 
      cols="30"
      class="resize-none"
  />
</template>

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

  const value = ref(null);
</script>

Autoresize

When autoResize is enabled, textarea grows instead of displaying a scrollbar.

<template>
  <CTextarea 
      v-model="value"
      auto-resize 
      rows="5" 
      cols="30" 
  />
</template>

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

const value = ref(null);
</script>

Filled

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<template>
  <CTextarea 
      v-model="value" 
      rows="5" 
      cols="30" 
      variant="filled" 
  />
</template>

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

const value = ref(null);
</script>

Sizes

CTextarea provides small and large sizes as alternatives to the base.

<template>
    <div class="card flex flex-col items-center gap-4">
        <CTextarea 
            v-model="value1" 
            size="small" 
            placeholder="Small" 
            rows="3" 
        />
        <CTextarea 
            v-model="value2" 
            placeholder="Normal" 
            rows="3" 
        />
        <CTextarea 
            v-model="value3" 
            size="large" 
            placeholder="Large" 
            rows="3" 
        />
    </div>
</template>

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

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CTextarea 
      v-model="value" 
      rows="5" cols="30" 
      :invalid="!value" 
      class="resize-none" 
      placeholder="Address" 
  />
</template>

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

const value = ref(null);
</script>

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
  <CTextarea 
      v-model="value" 
      rows="5" 
      cols="30" 
      disabled 
      class="resize-none"
      placeholder="Address"
  />
</template>

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

const value = ref(null);
</script>