Usage

Default

Use the v-model directive to bind the value of the component. The id and name props are required.

With Label

Use the label prop to add a label to the textarea.

Colors

Use the color prop to customize the component's border color.

Variants

Use the variant prop to customize the component's appearance. TextArea supports Outline and Ghost variants.

Sizes

Use the size prop to customize the component's size.

Rounded

Use the border-radius prop to customize the border radius.

Rows and Columns

Use the rows and cols props to specify the exact dimensions of the textarea.

<script setup lang="ts">
import CLTextArea from '@codeandfunction/callaloo/CLTextArea';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLTextArea id="textarea-rows-3" name="textarea-rows-3" :color="CLColors.Neutral" :rows="3" label="3 Rows" placeholder="Enter text..." />
  <CLTextArea id="textarea-rows-5" name="textarea-rows-5" :color="CLColors.Neutral" :rows="5" label="5 Rows" placeholder="Enter text..." />
  <CLTextArea id="textarea-cols-30" name="textarea-cols-30" :color="CLColors.Neutral" :cols="30" label="30 Columns" placeholder="Enter text..." />
</template>

Character Counter

Use the char-counter prop along with max-length to display a character counter below the textarea.

<script setup lang="ts">
import CLTextArea from '@codeandfunction/callaloo/CLTextArea';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLTextArea
    id="textarea-counter"
    name="textarea-counter"
    :color="CLColors.Primary"
    :max-length="200"
    char-counter
    label="With Character Counter"
    placeholder="Type something..." />
</template>

States

A textarea can have various states, which can be set via the busy, disabled, readonly, and required props.

<script setup lang="ts">
import CLTextArea from '@codeandfunction/callaloo/CLTextArea';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLTextArea id="textarea-busy" name="textarea-busy" :color="CLColors.Primary" busy label="Busy" placeholder="Loading..." />
  <CLTextArea id="textarea-disabled" name="textarea-disabled" :color="CLColors.Primary" disabled label="Disabled" placeholder="Disabled..." />
  <CLTextArea id="textarea-readonly" name="textarea-readonly" :color="CLColors.Primary" readonly label="Readonly" modelValue="This is readonly text" />
  <CLTextArea id="textarea-required" name="textarea-required" :color="CLColors.Primary" required label="Required" placeholder="Required field..." />
</template>

Resizable

Use the resizable prop to allow the textarea to be resized by the user.

<script setup lang="ts">
import CLTextArea from '@codeandfunction/callaloo/CLTextArea';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLTextArea
    id="textarea-resizable"
    name="textarea-resizable"
    :color="CLColors.Primary"
    resizable
    label="Resizable TextArea"
    placeholder="You can resize me..." />
</template>

Messages

Use the messages and message-type props to display validation or informational messages below the textarea.

<script setup lang="ts">
import CLTextArea from '@codeandfunction/callaloo/CLTextArea';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLTextArea
    id="textarea-error"
    name="textarea-error"
    :color="CLColors.Danger"
    :message-type="CLColors.Danger"
    :messages="['This field is required', 'Please enter at least 10 characters']"
    label="With Error Messages"
    placeholder="Enter text..." />
  <CLTextArea
    id="textarea-info"
    name="textarea-info"
    :color="CLColors.Info"
    :message-type="CLColors.Info"
    :messages="['This is an informational message']"
    label="With Info Message"
    placeholder="Enter text..." />
</template>

Fluid

Use the fluid prop to make the textarea take up 100% of its parent container's width.

<script setup lang="ts">
import CLTextArea from '@codeandfunction/callaloo/CLTextArea';
import { CLColors } from '@codeandfunction/callaloo';
</script>

<template>
  <CLTextArea
    id="textarea-fluid"
    name="textarea-fluid"
    :color="CLColors.Primary"
    fluid
    label="Fluid TextArea"
    placeholder="This textarea is fluid..." />
</template>

Props