Input group
Puts a fixed add-on to the left or right of a text field: a country code, currency, unit, domain name or icon. The label, hint and validation error work the same as in acun:input.
Prefix and suffix
prefix adds text to the left of the field and suffix to the right, separated by a thin line; when the field is clicked, the border and the line turn to the primary color; the two can be used together. The add-on is not included in the submitted value; it is purely visual.
<div class="space-y-4">
<acun:input-group name="phone" label="Phone" prefix="+90" placeholder="5xx xxx xx xx" />
<acun:input-group name="price" label="Product price" suffix="₺" placeholder="0.00" inputmode="decimal" />
<acun:input-group name="site" label="Website" prefix="https://" suffix=".com" />
</div>| Prop | Values |
|---|---|
prefix | Text on the left |
suffix | Text on the right |
With icons
To place an icon or other content instead of text, use the before and after slots. When a slot is given, the prefix / suffix on the same side is ignored.
<div class="space-y-4">
<acun:input-group name="email" type="email" label="Email" placeholder="[email protected]">
<acun:slot:before><acun:icon name="envelope" size="4" /></acun:slot:before>
</acun:input-group>
<acun:input-group name="search" type="search" label="Search customers" placeholder="Name, email or phone">
<acun:slot:after><acun:icon name="magnifying-glass" size="4" /></acun:slot:after>
</acun:input-group>
</div>| Prop | Values |
|---|---|
before | Custom content on the left (slot) |
after | Custom content on the right (slot) |
Label, hint and required field
label is shown above the field and hint below it. The required attribute adds a red asterisk to the label and is also passed to the field itself. Other attributes such as type, placeholder, value and disabled are added directly to the inner input.
<acun:input-group name="fee" label="Monthly subscription fee" suffix="₺" required hint="Per-user monthly price, excluding VAT." />| Prop | Values |
|---|---|
label | Label above |
hint | Help text below |
required | Adds * to the label |
Validation error
If there is a validation error for the field name (name or wire:model), the border turns red and the message is shown below the field in place of the hint.
<acun:input-group name="weight" label="Package weight" suffix="kg" value="-3" hint="Shipping cost is calculated from this weight." />| Prop | Values |
|---|---|
name | The error is looked up by this name; otherwise wire:model is used |
With Livewire
When wire:model is given, the field name is taken from that property, so you do not need to write name. Modifiers such as .live and .live.blur are also supported. To validate on the server when the field loses focus, write .live.blur: in Livewire 4, .blur alone only updates the value in the browser and sends no request.
<acun:input-group wire:model.live.blur="phone" label="Phone" prefix="+90" />| Prop | Values |
|---|---|
wire:model | The bound Livewire property |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
label | null | Label above the field |
name | null | Field name; otherwise the wire:model value is used |
hint | null | Help text below; when there is an error, the error is shown instead. Both are linked to the field with aria-describedby; aria-invalid is added on error |
prefix | null | Text add-on on the left |
suffix | null | Text add-on on the right |
type | text | Input type; other attributes are added to the input as well |
disabled · readonly | false | Muted background like acun:input; the box fits narrow columns |