Textarea
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.
<template>
<PTextarea :rows="12" />
</template>
Placeholder
Use the placeholder prop to set a placeholder text.
<template>
<PTextarea placeholder="Type something..." />
</template>
Autoresize
Use the autoresize prop to enable autoresizing the height of the Textarea.
<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.
<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.
<template>
<PTextarea color="neutral" highlight placeholder="Type something..." />
</template>
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.
<template>
<PTextarea color="neutral" variant="subtle" placeholder="Type something..." />
</template>
Size
Use the size prop to change the size of the Textarea.
<template>
<PTextarea size="xl" placeholder="Type something..." />
</template>
Icon
Use the icon prop to show an Icon inside the Textarea.
<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.
<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.
<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.
<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.
<template>
<PTextarea loading loading-icon="i-lucide:loader" placeholder="Search..." :rows="1" />
</template>
Disabled
Use the disabled prop to disable the Textarea.
<template>
<PTextarea disabled placeholder="Type something..." />
</template>
API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
Expose
When accessing the component via a template ref, you can use the following:
| Name | Type |
|---|---|
textareaRef | Ref<HTMLTextAreaElement | null> |
Theme
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.
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'
}
}
}
};
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'
}
}
}
};