Input

Full name

<flux:input label="Full name" placeholder="Sara Rezaei" />

Description

Mobile number

A verification code will be sent to this number.

<flux:input label="Mobile number" type="tel" placeholder="0912 345 6789" description="A verification code will be sent to this number." />

Icons

<div class="space-y-4">
    <flux:input icon="magnifying-glass" placeholder="Search products..." />
    <flux:input icon:trailing="credit-card" placeholder="Card number" />
</div>

Clearable, copyable, viewable

Three one-word props that add the button most text fields eventually want.

Search

Referral code

Password

<div class="space-y-4">
    <flux:input label="Search" value="Galaxy" icon="magnifying-glass" clearable />
    <flux:input label="Referral code" value="MAJID-1405" copyable />
    <flux:input label="Password" type="password" value="secret123" viewable />
</div>

Keyboard shortcut

⌘K

<flux:input placeholder="Search everything..." icon="magnifying-glass" kbd="⌘K" />

Sizes

<div class="space-y-4">
    <flux:input size="sm" placeholder="Small" />
    <flux:input placeholder="Base" />
</div>

Invalid

With Livewire, validation errors mark the field automatically. invalid is the manual escape hatch.

Email

Enter a valid email address.

<flux:field>
    <flux:label>Email</flux:label>
    <flux:input value="not-an-email" invalid />
    <flux:error name="email" message="Enter a valid email address." />
</flux:field>

Disabled and readonly

Seller

Order number

<div class="space-y-4">
    <flux:input label="Seller" value="Digikala" disabled />
    <flux:input label="Order number" value="MDS-140529" readonly />
</div>

File

Product image

<flux:input type="file" label="Product image" />

For drag-and-drop, multiple files and an upload progress bar, use mds:file-upload — the open alternative to Flux Pro's File Upload.

Group with prefix and suffix

Attach text or a control to either edge. Both edges are logical, so they swap in RTL.

https://

Toman

<div class="space-y-4">
    <flux:input.group>
        <flux:input.group.prefix>https://</flux:input.group.prefix>
        <flux:input placeholder="your-shop.ir" />
    </flux:input.group>

    <flux:input.group>
        <flux:input placeholder="0" />
        <flux:input.group.suffix>Toman</flux:input.group.suffix>
    </flux:input.group>
</div>

As a button

as="button" renders something that looks like an input but behaves like a trigger — the usual shape for opening a command palette.

<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />

Reference

flux:input

Prop	Description
label	Label above the field.
description	Smaller text under the label.
placeholder	Placeholder text.
type	Any HTML input type: `text`, `email`, `password`, `tel`, `file`, `date`… Default: `text`.
size	Options: `sm`, `xs`. Default: base.
variant	Options: `outline`, `filled`. Default: `outline`.
icon	Leading icon name.
icon:trailing	Trailing icon name.
clearable	Adds a clear button once there is a value.
copyable	Adds a copy-to-clipboard button.
viewable	For passwords: adds a reveal toggle.
expandable	Adds a trailing chevron button (for inputs that expand into a dropdown).
kbd	Keyboard shortcut hint on the trailing edge.
invalid	Marks the field as invalid.
loading	Shows a spinner while a Livewire action runs.
mask	Input mask, e.g. `99/99`.
as	Render as another element, e.g. `button`.
wire:model	Binds to a Livewire property.

flux:input.group

Joins an input with a prefix and/or suffix.

flux:input.group.prefix

Content on the leading edge of the group.

flux:input.group.suffix

Content on the trailing edge of the group.