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
Permettez aux utilisateurs de copier facilement le contenu:
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
Les inputs fonctionnent parfaitement avec Livewire wire:model:
Live Binding
Le texte est synchronisé en temps réel
Debounced
Attends 500ms après la saisie
Blur Update
Se met à jour quand l'input perd le 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
Les inputs s'adaptent automatiquement aux erreurs de validation:
Email (Valid)
✓ Email is valid
Email (Invalid)
<neura::input
type="email"
invalid
/>
<neura::error>Error message</neura::error>Advanced Examples
Exemples d'utilisation avancée:
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 des labels descriptifs
Chaque input doit avoir un label clair pour l'accessibilité
Ajoutez des placeholders utiles
Fournissez des exemples de format attendu dans le placeholder
Validez côté client et serveur
Use les attributs HTML5 (required, pattern) et la validation Laravel
Use le bon type d'input
email pour emails, tel pour téléphones, etc. pour une meilleure UX mobile
Groupez les champs liés
Use des fieldsets pour grouper les champs connexes
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 |