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.

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.

Use the size prop to make the input's height more compact.

Prevent users from interacting with an input by disabling it.

Useful for locking an input during a form submission.

Signal to users that the contents of an input are invalid.

Restrict the formatting of text content for unique cases by using Alpine's mask plugin

Append or prepend an icon to the inside of a form input.

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.

Attach buttons to the beginning or end of an input element.

Append text inside a form input.

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.