TextArea

TextArea is a textarea done DaisyUI style.

Code Example

<TextArea v-model="value" placeholder="Type here" />

Components

Textarea is a standalone component.

Textarea

Textarea can be customized with the following props:

Prop	Type	Description
`model-value`	string	Sets the text value. Use with `v-model`
`placeholder`	string	Sets the placeholder
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`bordered`	boolean	Enables the bordered style on the button
`ghost`	boolean	Enables the ghost style on the button
`disabled`	boolean	Disables the button both visually and functionally.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`

Color

Code Example

<TextArea v-model="value" placeholder="Type here" primary />

Bordered

Code Example

<TextArea v-model="value" placeholder="Type here" bordered/>

Ghost

Code Example

<TextArea v-model="value" placeholder="Type here" ghost/>

Disabled

Code Example

<TextArea v-model="value" placeholder="Type here" disabled />

With FormControl and Label

What is your name?Alt label

Code Example

<FormControl class="w-full max-w-xs">
  <Label>
    <LabelText>What is your name?</LabelText>
    <LabelTextAlt>Alt label</LabelTextAlt>
  </Label>
  <TextArea
    v-model="value"
    bordered
    placeholder="Type here"
    class="w-full max-w-xs"
  />
  <Label>
    <LabelTextAlt>Alt label</LabelTextAlt>
    <LabelTextAlt>Alt label</LabelTextAlt>
  </Label>
</FormControl>

Prev TextInput

Next Toggle