Textarea

A textarea element to input multi-line text.

Usage

Use the v-model directive to control the value of the Textarea.

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <PTextarea v-model="value" />
</template>

Rows

Use the rows prop to set the number of rows. Defaults to 3.

rows

<template>
  <PTextarea :rows="12" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

<template>
  <PTextarea placeholder="Type something..." />
</template>

Autoresize

Use the autoresize prop to enable autoresizing the height of the Textarea.

autoresize

<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea.')
</script>

<template>
  <PTextarea v-model="value" autoresize />
</template>

Use the maxrows prop to set the maximum number of rows when autoresizing. If set to 0, the Textarea will grow indefinitely.

maxrows

autoresize

<script setup lang="ts">
const value = ref('This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.')
</script>

<template>
  <PTextarea v-model="value" :maxrows="4" autoresize />
</template>

Color

Use the color prop to change the ring color when the Textarea is focused.

color

highlight

<template>
  <PTextarea color="neutral" highlight placeholder="Type something..." />
</template>

The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Variant

Use the variant prop to change the variant of the Textarea.

color

variant

highlight

<template>
  <PTextarea color="neutral" variant="subtle" placeholder="Type something..." />
</template>

Size

Use the size prop to change the size of the Textarea.

size

<template>
  <PTextarea size="xl" placeholder="Type something..." />
</template>

Icon

Use the icon prop to show an Icon inside the Textarea.

icon

size

variant

rows

<template>
  <PTextarea icon="i-lucide:search" size="md" variant="outline" placeholder="Search..." :rows="1" />
</template>

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

trailingIcon

size

rows

<template>
  <PTextarea trailing-icon="i-lucide:at-sign" placeholder="Enter your email" size="md" :rows="1" />
</template>

Avatar

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

avatar.src

size

variant

rows

<template>
  <PTextarea
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
    size="md"
    variant="outline"
    placeholder="Search..."
    :rows="1"
  />
</template>

Loading

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

trailing

rows

<template>
  <PTextarea loading placeholder="Search..." :rows="1" />
</template>

Loading Icon

Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.

loadingIcon

rows

<template>
  <PTextarea loading loading-icon="i-lucide:loader" placeholder="Search..." :rows="1" />
</template>

You can customize this icon globally in your app.config.ts under pohon.icons.loading key.

You can customize this icon globally in your vite.config.ts under pohon.icons.loading key.

Disabled

Use the disabled prop to disable the Textarea.

disabled

<template>
  <PTextarea disabled placeholder="Type something..." />
</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'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`autofocusDelay`	`0`	`number`
`autoresizeDelay`	`0`	`number`
`rows`	`3`	`number`
`maxrows`	`0`	`number`
`defaultValue`		`_Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>`
`modelValue`		`_Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>`
`modelModifiers`		`Mod`
`icon`		`string \| object` Display an icon based on the `leading` and `trailing` props.
`avatar`		`PAvatarProps` Display an avatar on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`trailingIcon`		`string \| object` Display an icon on the right side.
`loadingIcon`	`appConfig.pohon.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`autocomplete`		`string`
`cols`		`string \| number`
`dirname`		`string`
`maxlength`		`string \| number`
`minlength`		`string \| number`
`readonly`		`false \| true \| "true" \| "false"`
`wrap`		`string`
`required`		`boolean`
`autofocus`		`boolean`
`autoresize`		`boolean`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`pohon`		`{ root?: ClassValue; base?: ClassValue; leading?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailing?: ClassValue; trailingIcon?: ClassValue; }`

This component also supports all native <textarea> HTML attributes.

Slots

Slot	Type
`leading`	`{ pohon: object; }`
`default`	`{ pohon: object; }`
`trailing`	`{ pohon: object; }`

Emits

Event	Type
`update:modelValue`	`[value: _Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>]`
`blur`	`[event: FocusEvent]`
`change`	`[event: Event]`

Expose

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

Name	Type
`textareaRef`	`Ref<HTMLTextAreaElement \| null>`

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PTextarea. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    textarea: {
      slots: {
        root: '',
        base: '',
        leading: '',
        leadingIcon: '',
        leadingAvatar: '',
        leadingAvatarSize: '',
        trailing: '',
        trailingIcon: ''
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: '',
            base: ''
          },
          vertical: {
            root: '',
            base: ''
          }
        },
        size: {
          xs: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          sm: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          md: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          lg: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          xl: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: ''
        },
        autoresize: {
          true: {
            base: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    textarea: {
      slots: {
        root: '',
        base: '',
        leading: '',
        leadingIcon: '',
        leadingAvatar: '',
        leadingAvatarSize: '',
        trailing: '',
        trailingIcon: ''
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: '',
            base: ''
          },
          vertical: {
            root: '',
            base: ''
          }
        },
        size: {
          xs: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          sm: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          md: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          lg: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          xl: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: ''
        },
        autoresize: {
          true: {
            base: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};

Changelog

No recent changes

Switch

A control that toggles between two states.

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.