Components
Layouts

Input

Capture user data with various forms of text input.

Username This will be publicly displayed.

Longhand

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.

Types

Use the browser's various input types for different situations: text, email, password, etc.

Email
Password
Date

Smaller

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

Disabled

Prevent users from interacting with an input by disabling it.

Email

Readonly

Useful for locking an input during a form submission.

Public API key

Invalid

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

Input masking

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

Icons

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

Icon buttons

Append a button to the inside of an input to provide associated functionality.

Clearable, copyable, and viewable inputs

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.

Keyboard hint

Hint to users what keyboard shortcuts they can use with this input.

⌘K

As a button

To render an input using a button element, pass "button" into the as prop.

With buttons

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

Text prefixes and suffixes

Append text inside a form input.

https://
.brand.com

Input group labels

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.

Website
https://
Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie