Nuxt UI v4 is officially released!

Components

Textarea

GitHub
Display a textarea field.

Usage

Use a v-model to make the Textarea reactive.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color and variant props to change the visual style of the Textarea.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.

White

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Gray

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Placeholder

Use the placeholder prop to set a placeholder text.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Rows

Use the rows prop to set the number of rows of the Textarea.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Textarea.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Autoresize

Use the autoresize prop to enable the autoresize. Writing more lines than the rows prop will make the Textarea grow up.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Resize

Use the resize prop to enable the resize control.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Padded

Use the padded prop to remove the padding of the Textarea.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

name
string
null
size
TextareaSize
null
"md""2xs""xs""sm""lg""xl"
color
TextareaColor
config.default.color
"primary""white""gray""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
ui
{ form?: string; default?: DeepPartial<{ size: string; color: string; variant: string; }, any>; wrapper?: string; base?: string; rounded?: string; placeholder?: string; file?: DeepPartial<{ base: string; }, any>; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; gap?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; padding?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; leading?: DeepPartial<{ padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; trailing?: DeepPartial<{ padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; color?: DeepPartial<{ white: { outline: string; }; gray: { outline: string; }; }, any>; variant?: DeepPartial<{ outline: string; none: string; }, any>; icon?: DeepPartial<{ base: string; color: string; loading: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; leading: { wrapper: string; pointer: string; padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; trailing: { wrapper: string; pointer: string; padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
id
string
null
modelValue
string | number
""
variant
TextareaVariant
config.default.variant
"outline""none"
placeholder
string
null
autofocusDelay
number
100
modelModifiers
{ trim?: boolean; lazy?: boolean; number?: boolean; nullify?: boolean; }
{}
rows
number
3
maxrows
number
0
textareaClass
string
null
onBlur
(...args: any[]) => any
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
required
boolean
false
resize
boolean
false
disabled
boolean
false
autofocus
boolean
false
padded
boolean
true
autoresize
boolean
false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Tabs

A set of tab panels that are displayed one at a time.

Toggle

Display a toggle field.