Logo
Neura
Back to Home

Input

Text inputs with validation and Livewire support

Basic Usage

Name 
<neura::field>
    <neura::label>Name</neura::label>
    <neura::input type="text" placeholder="Enter your name" />
</neura::field>

Input Types

Text
Email
Password
Number
Date
Search 
<neura::input type="text" />
<neura::input type="email" />
<neura::input type="password" />
<neura::input type="number" />
<neura::input type="date" />
<neura::input type="search" />

With Error

Email 
<neura::field>
    <neura::label>Email</neura::label>
    <neura::input type="email" />
    <neura::error>This field is required</neura::error>
</neura::field>

With Description

Username
Choose a unique username 
<neura::field>
    <neura::label>Username</neura::label>
    <neura::input type="text" />
    <neura::description>
        Choose a unique username
    </neura::description>
</neura::field>

With Icons

Add icons to the left or right to enhance your inputs:
Search
Email
URL
Phone 
<neura::input
    type="search"
    placeholder="Search..."
    leftIcon="magnifying-glass"
/>

<neura::input
    type="email"
    placeholder="email@example.com"
    leftIcon="envelope"
/>

Interactive Options

Inputs support several interactive options:

Clearable

Add a button to quickly clear the content:
Search 
<neura::input
    type="text"
    placeholder="Type to search..."
    leftIcon="magnifying-glass"
    clearable
/>

Copyable

Allow users to easily copy content:
API Key 
<neura::input
    type="text"
    value="sk_live_1234567890abcdef"
    readonly
    copyable
/>

Revealable (Password)

For password fields, add a button to show/hide:
Password 
<neura::input
    type="password"
    placeholder="Enter your password"
    leftIcon="lock-closed"
    revealable
/>

Multiple Options Combined

Combinez plusieurs options ensemble:
Search with Clear 
<neura::input
    type="search"
    leftIcon="magnifying-glass"
    clearable
    rightIcon="funnel"
/>

Prefix & Suffix

Add text or elements before or after the input:
Website
.example.com
Price
$
USD 
<neura::input type="text" prefixIcon="globe-alt">
    <x-slot:suffix>.example.com</x-slot:suffix>
</neura::input>

<neura::input type="number">
    <x-slot:prefix>$</x-slot:prefix>
    <x-slot:suffix>USD</x-slot:suffix>
</neura::input>

States

Inputs support different states:
Normal
Disabled
Readonly
Required 
<neura::input type="text" disabled />
<neura::input type="text" readonly />
<neura::input type="text" required />

Livewire Integration

Inputs work perfectly with Livewire wire:model:
Live Binding
Text is synchronized in real time
Debounced
Waits 500ms after typing
Blur Update
Updates when the input loses focus 
<!-- Real-time binding -->
<neura::input wire:model.live="name" />

<!-- Debounced (500ms delay) -->
<neura::input wire:model.live.debounce.500ms="search" />

<!-- On blur only -->
<neura::input wire:model.blur="title" />

Validation States

Inputs automatically adapt to validation errors:
Email (Valid)
✓ Email is valid
Email (Invalid) 
<neura::input
    type="email"
    invalid
/>
<neura::error>Error message</neura::error>

Advanced Examples

Advanced usage examples:
Credit Card
Amount
Location
Tag 
<neura::input
    type="text"
    placeholder="1234 5678 9012 3456"
    leftIcon="credit-card"
    clearable
/>

<neura::input
    type="number"
    leftIcon="currency-dollar"
    step="0.01"
/>

Best Practices

Use descriptive labels
Each input should have a clear label for accessibility
Add helpful placeholders
Provide examples of expected format in the placeholder
Validate on client and server
Use HTML5 attributes (required, pattern) and Laravel validation
Use the correct input type
email for emails, tel for phones, etc. for better mobile UX
Group related fields
Use fieldsets to group related fields

Properties

Property Type Default Description
type string text HTML input type
leftIcon string null Icon name on the left
rightIcon string null Icon name on the right
clearable boolean false Add clear button
copyable boolean false Add copy button
revealable boolean false Add show/hide toggle for passwords
invalid boolean false Show error state (auto-detected from errors)
prefix slot null Content before input
suffix slot null Content after input
disabled boolean false Disable input
readonly boolean false Make input readonly