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><script setup lang="ts">
import { ref } from 'vue'
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><script setup lang="ts">
import { ref } from 'vue'
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><script setup lang="ts">
import { ref } from 'vue'
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>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.
<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',
loading: 'lazy'
}"
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> |
autoResize | () => void |
Theme
app.config.ts
export default defineAppConfig({
ui: {
textarea: {
slots: {
root: 'relative inline-flex items-center w-full',
base: [
'placeholder:color-text-dimmed appearance-none border-0 rounded-md w-full disabled:opacity-75 disabled:cursor-not-allowed',
'transition-colors'
],
leading: 'absolute start-0 flex items-start',
leadingIcon: 'shrink-0 color-text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute end-0 flex items-start',
trailingIcon: 'shrink-0 color-text-dimmed'
},
variants: {
fieldGroup: {
horizontal: {
root: 'group has-focus-visible:z-1',
base: 'group-not-[*:only-child]:group-first:rounded-e-none group-not-[*:only-child]:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group has-focus-visible:z-1',
base: 'group-not-[*:only-child]:group-first:rounded-b-none group-not-[*:only-child]:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-sm/4 gap-1',
leading: 'ps-2 inset-y-1',
trailing: 'pe-2 inset-y-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-base/5 gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-base/5 gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'color-text-highlighted bg-background ring ring-inset ring-border-accented',
soft: 'color-text-highlighted bg-background-elevated/50 hover:bg-background-elevated focus:bg-background-elevated disabled:bg-background-elevated/50',
subtle: 'color-text-highlighted bg-background-elevated ring ring-inset ring-border-accented',
ghost: 'color-text-highlighted bg-transparent hover:bg-background-elevated focus:bg-background-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'color-text-highlighted bg-transparent focus:outline-none'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
fixed: {
false: ''
},
type: {
file: 'file:me-1.5 file:font-500 file:color-text-muted file:outline-none'
},
autoresize: {
true: {
base: 'resize-none'
}
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
},
{
color: 'primary',
variant: [
'soft',
'ghost'
],
class: 'outline-primary/25 focus-visible:outline-3'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset pohon:ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'outline-border-inverted/25 focus-visible:outline-3 focus-visible:ring-border-inverted'
},
{
color: 'neutral',
variant: [
'soft',
'ghost'
],
class: 'outline-border-inverted/25 focus-visible:outline-3'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-border-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
},
{
fixed: false,
size: 'xs',
class: 'md:text-xs'
},
{
fixed: false,
size: 'sm',
class: 'md:text-xs'
},
{
fixed: false,
size: 'md',
class: 'md:text-sm'
},
{
fixed: false,
size: 'lg',
class: 'md:text-sm'
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
textarea: {
slots: {
root: 'relative inline-flex items-center w-full',
base: [
'placeholder:color-text-dimmed appearance-none border-0 rounded-md w-full disabled:opacity-75 disabled:cursor-not-allowed',
'transition-colors'
],
leading: 'absolute start-0 flex items-start',
leadingIcon: 'shrink-0 color-text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute end-0 flex items-start',
trailingIcon: 'shrink-0 color-text-dimmed'
},
variants: {
fieldGroup: {
horizontal: {
root: 'group has-focus-visible:z-1',
base: 'group-not-[*:only-child]:group-first:rounded-e-none group-not-[*:only-child]:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group has-focus-visible:z-1',
base: 'group-not-[*:only-child]:group-first:rounded-b-none group-not-[*:only-child]:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: 'px-2 py-1 text-sm/4 gap-1',
leading: 'ps-2 inset-y-1',
trailing: 'pe-2 inset-y-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-base/5 gap-1.5',
leading: 'ps-2.5 inset-y-1.5',
trailing: 'pe-2.5 inset-y-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-base/5 gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3 inset-y-2',
trailing: 'pe-3 inset-y-2',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
}
},
variant: {
outline: 'color-text-highlighted bg-background ring ring-inset ring-border-accented',
soft: 'color-text-highlighted bg-background-elevated/50 hover:bg-background-elevated focus:bg-background-elevated disabled:bg-background-elevated/50',
subtle: 'color-text-highlighted bg-background-elevated ring ring-inset ring-border-accented',
ghost: 'color-text-highlighted bg-transparent hover:bg-background-elevated focus:bg-background-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'color-text-highlighted bg-transparent focus:outline-none'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
fixed: {
false: ''
},
type: {
file: 'file:me-1.5 file:font-500 file:color-text-muted file:outline-none'
},
autoresize: {
true: {
base: 'resize-none'
}
}
},
compoundVariants: [
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
},
{
color: 'primary',
variant: [
'soft',
'ghost'
],
class: 'outline-primary/25 focus-visible:outline-3'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset pohon:ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'outline-border-inverted/25 focus-visible:outline-3 focus-visible:ring-border-inverted'
},
{
color: 'neutral',
variant: [
'soft',
'ghost'
],
class: 'outline-border-inverted/25 focus-visible:outline-3'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-border-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
},
{
fixed: false,
size: 'xs',
class: 'md:text-xs'
},
{
fixed: false,
size: 'sm',
class: 'md:text-xs'
},
{
fixed: false,
size: 'md',
class: 'md:text-sm'
},
{
fixed: false,
size: 'lg',
class: 'md:text-sm'
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
]
})Changelog
No recent changes