Capture user data with various forms of text input.
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.
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:
Use the browser's various input types for different situations: text, email, password, etc.
Flux provides a special input component for file uploads. It's a simple wrapper around the native input[type="file"] element.
Restrict the formatting of text content for unique cases by using Alpine's mask plugin
Append a button to the inside of an input to provide associated functionality.
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.
Hint to users what keyboard shortcuts they can use with this input.
To render an input using a button element, pass "button" into the as prop.
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.
Prop
|
Description
|
---|---|
wire:model |
Binds the input to a Livewire property. See the wire:model documentation for more information.
|
name |
Name attribute for the input. Automatically set when using wire:model.
|
label |
Label text displayed above the input. When provided, wraps the input in a flux:field component with an adjacent flux:label component. See the field component.
|
description |
Help text displayed above the input. When provided alongside label, appears between the label and input within the flux:field wrapper. See the field component.
|
description:trailing |
Help text displayed below the input. When provided alongside label, appears between the label and input within the flux:field wrapper. See the field component.
|
placeholder |
Placeholder text displayed when the input is empty.
|
size |
Size of the input. Options: sm, xs.
|
variant |
Visual style variant. Options: filled. Default: outline.
|
disabled |
Prevents user interaction with the input.
|
readonly |
Makes the input read-only.
|
invalid |
Applies error styling to the input.
|
multiple |
For file inputs, allows selecting multiple files.
|
mask |
Input mask pattern using Alpine's mask plugin. Example: 99/99/9999.
|
icon |
Name of the icon displayed at the start of the input.
|
icon:trailing |
Name of the icon displayed at the end of the input.
|
kbd |
Keyboard shortcut hint displayed at the end of the input.
|
clearable |
If true, displays a clear button when the input has content.
|
copyable |
If true, displays a copy button to copy the input's content.
|
viewable |
For password inputs, displays a toggle to show/hide the password.
|
as |
Render the input as a different element. Options: button. Default: input.
|
class:input |
CSS classes applied directly to the input element instead of the wrapper.
|
Slot
|
Description
|
---|---|
icon |
Custom content displayed at the start of the input (e.g., icons).
|
icon:leading |
Custom content displayed at the start of the input (e.g., icons).
|
icon:trailing |
Custom content displayed at the end of the input (e.g., buttons).
|
Attribute
|
Description
|
---|---|
data-flux-input |
Applied to the root element for styling and identification.
|
Slot
|
Description
|
---|---|
default |
The input group content, typically containing an input and prefix/suffix elements.
|
Slot
|
Description
|
---|---|
default |
Content displayed before the input (e.g., icons, text, buttons).
|
Slot
|
Description
|
---|---|
default |
Content displayed after the input (e.g., icons, text, buttons).
|