Components / Textarea

Textarea

# Introduction

The <zinq:textarea> component is a simple wrapper around the native <textarea> element. It supports all the native textarea attributes.

# Usage

There are no required children of the <zinq:textarea> component.

  
<zinq:textarea class="max-w-md" />

# Customization

See all available customization options for the Textarea component.

# Label

Like many other form components, the Textarea component can have a label. You can set the label by using the label attribute.

  
<zinq:textarea label="Message" class="max-w-md" />

# Placeholder

You can set a placeholder text for the textarea field by using the placeholder attribute.

  
<zinq:textarea placeholder="Your message" class="max-w-md" />

# Sizing

The Textarea component comes in three sizes: default , sm , and lg . By default, the size is default .

  
<div class="flex flex-col space-y-3">
    <zinq:textarea size="sm" placeholder="Your message" class="max-w-md" />
    <zinq:textarea placeholder="Your message" class="max-w-md" />
    <zinq:textarea size="lg" placeholder="Your message" class="max-w-md" />
</div>

# Focus

You can use focus attribute to make the field focused. This way the field will be focused when the page is loaded.

It is useful when you want to focus on the textarea field when the page is loaded or modal is opened.

  
<zinq:textarea focus class="max-w-md" />

# Livewire

You can use the wire:model directive to bind the Textarea to a Livewire property.

  
<zinq:textarea wire:model="message" />

# Live

You can also use wire:model.live to update the model on every textarea change.

Your message

Please provide message

  
public string $message = '';

public function save(): void
{

}

public function render(): string
{
    return <<<HTML
        <div>
            <div class="mb-4 flex items-center space-x-2">Your message: {$this->message}</div>
            <zinq:form action="save">
                <zinq:form.textarea wire:model="message" />
                <zinq:button class="mt-6">Save</zinq:button>
            </zinq:form>
        </div>
    HTML;
}

# Validation errors

The Textarea component will automatically display validation errors for you when wire:model attribute is used.

  
#[Rule('required|min:200')]
public string $message = '';

public function save(): void
{
    $this->validate();
}

public function render(): string
{
    return <<<HTML
        <zinq:form action="save">
            <zinq:textarea wire:model="message" placeholder="Enter your message" />
            <zinq:button>Save to see validation error</zinq:button>
        </zinq:form>
    HTML;
}

# Manual validation errors

Or you can manually display validation errors by using the error attribute.

Your message is too short!
  
<zinq:textarea error="Your message is too short!" class="max-w-md" />