Components / Input

Input

# Introduction

The <zinq:input> component is used to create a text input. It can be used to create a variety of input types, such as text, password, email, number, etc.

# Usage

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

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

# Customization

The Input component can be customized in many ways.

# Label

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

  
<zinq:input label="Full name" class="max-w-md" />

# Placeholder

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

  
<zinq:input placeholder="Enter your full name" class="max-w-md" />

# Type

By default, the Input component will render a text input. You can change the input type by passing the type attribute.

  
<zinq:input type="password" placeholder="Enter your password" class="max-w-md" />

# Sizing

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

  
<div class="flex flex-col space-y-3">
    <zinq:input size="sm" placeholder="Enter your email address" type="email" class="max-w-md" />
    <zinq:input placeholder="Enter your email address" type="email" class="max-w-md" />
    <zinq:input size="lg" placeholder="Enter your email address" type="email" class="max-w-md" />
</div>

Or sm to make it smaller.

  
<zinq:input size="sm" placeholder="Enter your email address" type="email" class="max-w-md" />

# Solo

You can also use solo attribute to make the field display as a single character.

  
<zinq:input solo maxlength="1" class="max-w-md" />

# 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 input field when the page is loaded or modal is opened.

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

# Livewire

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

  
<zinq:input wire:model="name" />

# Live

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

Hello Traveler

  
public string $name = '';

public function render(): string
{
    return <<<HTML
        <div>
            <p>Hello <zinq:badge>{$this->name ?? 'Traveler'}</zinq:badge></p>
            <zinq:input wire:model.live="name" placeholder="Enter your name" />
        </div>
    HTML;
}

# Validation errors

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

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

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

public function render(): string
{
    return <<<HTML
        <zinq:form action="save">
            <zinq:input wire:model="name" placeholder="Enter your name" />
            <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.

Is it your real name?
  
<zinq:input error="Is it your real name?" class="max-w-md" />