Capture user data with various forms of text input.
<flux:input wire:model="username" label="Username" description="This will be publicly displayed." />Flux makes it easy to wrap your inputs in a field with label/description and error messages. If you need more control over the layout of these fields, you can assemble the individual field components.
<flux:field> <flux:label>Username</flux:label> <flux:description>This will be publicly displayed.</flux:description> <flux:input /> <flux:error name="username" /></flux:field>Unlike other form components, Flux's input component is composed of two underlying elements: an input element and a wrapper div. The wrapper div is there to add padding where icons should go.
This is typically fine, however, if you need to pass classes into the input component and have them directly applied to the input element, you can do so using the class:input attribute instead of simply class:
<flux:input class="max-w-xs" class:input="font-mono" />Use the browser's various input types for different situations: text, email, password, etc.
<flux:input type="email" label="Email" /><flux:input type="password" label="Password" /><flux:input type="date" max="2999-12-31" label="Date" />Flux provides a special input component for file uploads. It's a simple wrapper around the native input[type="file"] element.
<flux:input type="file" wire:model="logo" label="Logo"/><flux:input type="file" wire:model="attachments" label="Attachments" multiple />Use the size prop to make the input's height more compact.
<flux:input size="sm" placeholder="Filter by..." />Prevent users from interacting with an input by disabling it.
<flux:input disabled label="Email" />Useful for locking an input during a form submission.
<flux:input readonly variant="filled" />Restrict the formatting of text content for unique cases by using Alpine's mask plugin
<flux:input mask="(999) 999-9999" value="7161234567" />Append or prepend an icon to the inside of a form input.
<flux:input icon="magnifying-glass" placeholder="Search orders" /><flux:input icon-trailing="credit-card" placeholder="4444-4444-4444-4444" /><flux:input icon-trailing="loading" placeholder="Search transactions" />Append a button to the inside of an input to provide associated functionality.
<flux:input placeholder="Search orders"> <x-slot name="iconTrailing"> <flux:button size="sm" variant="subtle" icon="x-mark" class="-mr-1" /> </x-slot></flux:input><flux:input type="password" value="password"> <x-slot name="iconTrailing"> <flux:button size="sm" variant="subtle" icon="eye" class="-mr-1" /> </x-slot></flux:input>Flux provides three special input properties to configure common input button behaviors. clearable for clearing contents, copyable for copying contents, and viewable for toggling password visibility.
<flux:input placeholder="Search orders" clearable /><flux:input type="password" value="password" viewable /><flux:input icon="key" value="FLUX-1234-5678-ABCD-EFGH" readonly copyable />Hint to users what keyboard shortcuts they can use with this input.
<flux:input kbd="⌘K" icon="magnifying-glass" placeholder="Search..."/>To render an input using a button element, pass "button" into the as prop.
<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />Attach buttons to the beginning or end of an input element.
<flux:input.group> <flux:input placeholder="Post title" /> <flux:button icon="plus">New post</flux:button></flux:input.group><flux:input.group> <flux:select variant="listbox" class="max-w-fit"> <flux:option selected>USD</flux:option> <!-- ... --> </flux:select> <flux:input placeholder="$99.99" /></flux:input.group>Append text inside a form input.
<flux:input.group> <flux:input.group.prefix>https://</flux:input.group.prefix> <flux:input placeholder="example.com" /></flux:input.group><flux:input.group> <flux:input placeholder="chunky-spaceship" /> <flux:input.group.suffix>.brand.com</flux:input.group.suffix></flux:input.group>If you want to use an input group in a form field with a label, you will need to wrap the input group in a field component.
<flux:field> <flux:label>Website</flux:label> <flux:input.group> <flux:input.group.prefix>https://</flux:input.group.prefix> <flux:input wire:model="website" placeholder="example.com" /> </flux:input.group> <flux:error name="website" /></flux:field>