Text input
A labeled text input. The field name and id are derived from the wire:model value, and validation errors from $errors are shown automatically; it offers a floating label and a show/hide password option.
Basic usage
label draws a label above the field. The field's name and id are derived from wire:model (also with modifiers such as wire:model.live); this way the id stays the same on every update and focus is not lost during Livewire updates. If you do not use Livewire, pass name. Other attributes such as placeholder and value go straight to the <input>.
<div class="space-y-4">
<acun:input wire:model="product_name" label="Product name" placeholder="E.g. Wireless headphones" />
<acun:input name="custom_code" label="Custom code" value="SKU-01" />
</div>| Prop | Values |
|---|---|
label | Label above the field |
name | Field name; defaults to the wire:model value |
Label and hint
hint adds a short help text below the field; when there is an error, it gives way to the error message. The hint is linked to the field with aria-describedby, so screen readers read it as well when the field is reached. The required attribute puts a red asterisk next to the label and turns on the browser's required-field check.
<div class="space-y-4">
<acun:input wire:model="phone" type="tel" label="Phone" required hint="10 digits, without the leading 0." />
<acun:input wire:model="custom_code" label="Custom code" hint="Shown as the short name in reports." />
</div>| Prop | Values |
|---|---|
hint | Help text below |
required | Attribute; adds * to the label |
Types
type goes straight to the field; the default is text. type="search" adds a magnifier icon to the left of the field. For search boxes without a label, state the purpose of the field with aria-label.
<div class="space-y-4">
<acun:input name="email" type="email" label="Email" placeholder="[email protected]" />
<acun:input name="stock_quantity" type="number" label="Stock quantity" min="0" value="12" />
<acun:input name="delivery_date" type="date" label="Delivery date" />
<acun:search wire:model.live.debounce.400ms="search" placeholder="Product name or custom code" aria-label="Search products" />
</div>| Prop | Values |
|---|---|
type | text | email | number | date | tel | search | password … |
Floating label
variant="floating" places the label inside the field; when the field is focused or filled, the label shrinks up to the top edge. Since the label acts as the placeholder, placeholder is not used with this variant. It suits forms with few fields, such as login screens.
<div class="space-y-4">
<acun:input wire:model="email" type="email" variant="floating" label="Email" />
<acun:input name="full_name" variant="floating" label="Full name" value="Ayşe Yılmaz" />
</div>| Prop | Values |
|---|---|
variant | default | floating |
Password field
When viewable is given together with type="password", an eye button named "Show password" is added to the right of the field; users can reveal the password they typed and hide it again. The button can also be reached with the keyboard (Tab) and reports whether it is pressed with aria-pressed. It works with the floating label too.
<div class="space-y-4">
<acun:input wire:model="password" type="password" label="Password" viewable />
<acun:input wire:model="password_confirmation" type="password" variant="floating" label="Password (again)" viewable />
</div>| Prop | Values |
|---|---|
viewable | true | false |
Disabled and read-only
disabled draws the field with a gray background and gray text, the cursor turns into a not-allowed sign on hover, and the value is not submitted with the form. readonly marks the field as unchangeable with only a gray background; the value is still submitted and can be copied. On floating-label fields, the disabled state is shown by fading the field so the label notch is not broken.
<div class="space-y-4">
<acun:input name="customer_no" label="Customer no." value="CUS-10482" readonly />
<acun:input name="registration_date" label="Registration date" value="12.03.2026" disabled />
<acun:input name="company" variant="floating" label="Company" value="Acme Software" disabled />
</div>| Prop | Values |
|---|---|
disabled | Attribute; gray background and text (faded with a floating label) |
readonly | Attribute; gray background (except with a floating label) |
Validation error
If $errors contains an error for the field's name, the border turns red and the message is shown below the field; hint is hidden meanwhile. The field gets aria-invalid="true" and is linked to the message with aria-describedby; the message id is generated by appending -message to the field id (here national_id-message). If you pass your own aria-describedby value, it is kept and the message id is added next to it. In Livewire it works automatically after $this->validate(); no extra code is needed.
<acun:input wire:model="national_id" label="National ID no." value="1234567" hint="11-digit number." />| Prop | Values |
|---|---|
aria-describedby | Attribute; the message id is appended to the given value |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Label; * is added next to it when the required attribute is present |
name | null | Field name; defaults to the wire:model value. The id and the error key also come from it |
hint | null | Help text below while there is no error; linked to the field with aria-describedby |
variant | default | default · floating |
viewable | false | Show/hide button on password fields, also usable with the keyboard (aria-pressed) |
(attributes) | — | type, placeholder, value, required, disabled, readonly, id … go straight to the <input> element; aria-describedby is merged with the message id |