Form Inputs

Flux provides a complete set of form input components with built-in validation, error handling, and seamless Livewire integration.

Input

The primary text input component with extensive features:

Basic Usage

<flux:input wire:model="name" placeholder="Enter your name" />

Input Types

<flux:input type="text" placeholder="Text" />
<flux:input type="email" placeholder="Email" />
<flux:input type="password" placeholder="Password" />
<flux:input type="number" placeholder="Number" />
<flux:input type="date" />
<flux:input type="time" />
<flux:input type="url" placeholder="https://" />
<flux:input type="tel" placeholder="Phone" />
<flux:input type="search" placeholder="Search..." />

With Icons

<!-- Leading icon -->
<flux:input icon="magnifying-glass" placeholder="Search..." />
<flux:input icon:leading="envelope" type="email" />

<!-- Trailing icon -->
<flux:input icon:trailing="information-circle" />

Sizes

<flux:input size="xs" placeholder="Extra small" />
<flux:input size="sm" placeholder="Small" />
<flux:input size="base" placeholder="Base (default)" />

Variants

Outline
Filled

<flux:input variant="outline" placeholder="Outlined input" />

Default variant with visible border.

<flux:input variant="filled" placeholder="Filled input" />

Solid background variant.

Input Features

Clearable

Add a clear button:

<flux:input wire:model="search" clearable placeholder="Search..." />

Copyable

Add a copy-to-clipboard button:

<flux:input value="secret-token-123" copyable readonly />

Viewable

Toggle password visibility:

<flux:input type="password" viewable placeholder="Password" />

Expandable

Expand to textarea on click:

<flux:input wire:model="description" expandable placeholder="Add description..." />

Loading State

<flux:input wire:model.live="search" loading placeholder="Search..." />

Input Masking

Format input values:

<!-- Phone number -->
<flux:input mask="(999) 999-9999" placeholder="Phone" />

<!-- Credit card -->
<flux:input mask="9999 9999 9999 9999" placeholder="Card number" />

<!-- Date -->
<flux:input mask="99/99/9999" placeholder="MM/DD/YYYY" />

<!-- Dynamic masking -->
<flux:input mask:dynamic="$money($input)" placeholder="Amount" />

Input Props

Prop	Type	Default	Description
`type`	`string`	`text`	Input type
`variant`	`string`	`outline`	Visual variant: `outline`, `filled`
`size`	`string`	`base`	Size: `xs`, `sm`, `base`
`icon`	`string`	-	Leading icon name
`icon:leading`	`string`	-	Leading icon (alternative)
`icon:trailing`	`string`	-	Trailing icon name
`clearable`	`boolean`	`false`	Show clear button
`copyable`	`boolean`	`false`	Show copy button
`viewable`	`boolean`	`false`	Show view toggle (password)
`expandable`	`boolean`	`false`	Expand to textarea
`loading`	`boolean`	auto	Show loading indicator
`mask`	`string`	-	Input mask pattern
`mask:dynamic`	`string`	-	Dynamic mask expression
`invalid`	`boolean`	auto	Force invalid state

Textarea

Multi-line text input:

Basic Usage

<flux:textarea wire:model="description" placeholder="Enter description..." />

Rows

<flux:textarea rows="3" placeholder="3 rows" />
<flux:textarea rows="6" placeholder="6 rows" />

<!-- Auto-resize based on content -->
<flux:textarea rows="auto" placeholder="Auto-resize" />

Resize Behavior

<flux:textarea resize="vertical" placeholder="Vertical resize" />
<flux:textarea resize="horizontal" placeholder="Horizontal resize" />
<flux:textarea resize="both" placeholder="Both directions" />
<flux:textarea resize="none" placeholder="No resize" />

Select

Native select dropdown with custom styling:

Basic Usage

<flux:select wire:model="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="mx">Mexico</option>
</flux:select>

With Groups

<flux:select wire:model="category">
    <optgroup label="Fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="carrot">Carrot</option>
        <option value="lettuce">Lettuce</option>
    </optgroup>
</flux:select>

Checkbox

Checkbox inputs with multiple variants:

Basic Usage

<flux:checkbox wire:model="accepted">
    I accept the terms
</flux:checkbox>

Variants

Default
Buttons
Cards
Pills

<flux:checkbox wire:model="option1">Option 1</flux:checkbox>
<flux:checkbox wire:model="option2">Option 2</flux:checkbox>

Standard checkbox appearance.

<flux:checkbox.group variant="buttons">
    <flux:checkbox value="1">Option 1</flux:checkbox>
    <flux:checkbox value="2">Option 2</flux:checkbox>
    <flux:checkbox value="3">Option 3</flux:checkbox>
</flux:checkbox.group>

Button-style checkboxes.

<flux:checkbox.group variant="cards">
    <flux:checkbox value="basic">Basic Plan</flux:checkbox>
    <flux:checkbox value="pro">Pro Plan</flux:checkbox>
    <flux:checkbox value="enterprise">Enterprise</flux:checkbox>
</flux:checkbox.group>

Card-style checkboxes.

<flux:checkbox.group variant="pills">
    <flux:checkbox value="tag1">React</flux:checkbox>
    <flux:checkbox value="tag2">Vue</flux:checkbox>
    <flux:checkbox value="tag3">Laravel</flux:checkbox>
</flux:checkbox.group>

Pill-style checkboxes.

Checkbox Group

<flux:checkbox.group wire:model="interests">
    <flux:checkbox value="sports">Sports</flux:checkbox>
    <flux:checkbox value="music">Music</flux:checkbox>
    <flux:checkbox value="travel">Travel</flux:checkbox>
</flux:checkbox.group>

Radio

Radio button inputs with multiple variants:

Basic Usage

<flux:radio.group wire:model="plan">
    <flux:radio value="free">Free</flux:radio>
    <flux:radio value="pro">Pro</flux:radio>
    <flux:radio value="enterprise">Enterprise</flux:radio>
</flux:radio.group>

Variants

Default
Buttons
Cards
Pills
Segmented

<flux:radio.group wire:model="size">
    <flux:radio value="sm">Small</flux:radio>
    <flux:radio value="md">Medium</flux:radio>
    <flux:radio value="lg">Large</flux:radio>
</flux:radio.group>

<flux:radio.group variant="buttons" wire:model="view">
    <flux:radio value="list">List View</flux:radio>
    <flux:radio value="grid">Grid View</flux:radio>
</flux:radio.group>

<flux:radio.group variant="cards" wire:model="plan">
    <flux:radio value="starter">Starter - $9/mo</flux:radio>
    <flux:radio value="professional">Professional - $29/mo</flux:radio>
    <flux:radio value="enterprise">Enterprise - $99/mo</flux:radio>
</flux:radio.group>

<flux:radio.group variant="pills" wire:model="priority">
    <flux:radio value="low">Low</flux:radio>
    <flux:radio value="medium">Medium</flux:radio>
    <flux:radio value="high">High</flux:radio>
</flux:radio.group>

<flux:radio.group variant="segmented" wire:model="interval">
    <flux:radio value="monthly">Monthly</flux:radio>
    <flux:radio value="yearly">Yearly</flux:radio>
</flux:radio.group>

iOS-style segmented control.

Switch

Toggle switch for boolean values:

<flux:switch wire:model="notifications">
    Enable notifications
</flux:switch>

<flux:switch wire:model="darkMode">
    Dark mode
</flux:switch>

Field

Wrapper component for form inputs with labels, descriptions, and errors:

Basic Usage

<flux:field>
    <flux:label>Email Address</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>

With Description

<flux:field>
    <flux:label>Username</flux:label>
    <flux:description>Choose a unique username for your profile.</flux:description>
    <flux:input wire:model="username" />
    <flux:error name="username" />
</flux:field>

Field Components

Label

<flux:label>Full Name</flux:label>
<flux:label required>Email (required)</flux:label>

Description

<flux:description>Helpful context about this field.</flux:description>

Error

<flux:error name="email" />

Automatically displays validation errors from Livewire.

Fieldset

Group related form fields:

<flux:fieldset>
    <flux:legend>Personal Information</flux:legend>
    
    <flux:field>
        <flux:label>First Name</flux:label>
        <flux:input wire:model="firstName" />
    </flux:field>
    
    <flux:field>
        <flux:label>Last Name</flux:label>
        <flux:input wire:model="lastName" />
    </flux:field>
</flux:fieldset>

Validation

All form components automatically integrate with Laravel validation:

<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>

Inputs automatically show error state when validation fails:

class ContactForm extends Component
{
    public $email = '';
    
    protected $rules = [
        'email' => 'required|email',
    ];
    
    public function submit()
    {
        $this->validate();
        // ...
    }
}

OTP

One-Time Password (OTP) input component for verification codes and authentication.

Basic Usage

<flux:otp wire:model="code" length="6" />

Private Mode

Hide the entered digits for security:

<flux:otp wire:model="code" length="6" private />

Custom Length

<flux:otp wire:model="code" length="4" />
<flux:otp wire:model="code" length="8" />

With Field Wrapper

<flux:field>
    <flux:label>Enter verification code</flux:label>
    <flux:otp wire:model="code" length="6" />
    <flux:error name="code" />
</flux:field>

Props

Prop	Type	Default	Description
`length`	`int`	`null`	Number of input boxes
`private`	`bool`	`false`	Hide entered digits
`wire:model`	`string`	-	Livewire property binding

Avatar

Display user avatars with initials, images, or icons.

Basic Usage

<flux:avatar name="John Doe" />
<flux:avatar src="/path/to/image.jpg" alt="John Doe" />
<flux:avatar icon="user" />

Sizes

<flux:avatar name="John Doe" size="xs" />
<flux:avatar name="John Doe" size="sm" />
<flux:avatar name="John Doe" size="md" />
<flux:avatar name="John Doe" size="lg" />
<flux:avatar name="John Doe" size="xl" />

Colors

<flux:avatar name="John Doe" color="auto" />
<flux:avatar name="John Doe" color="blue" />
<flux:avatar name="John Doe" color="red" />
<flux:avatar name="John Doe" color="green" />

Circle Shape

<flux:avatar name="John Doe" circle />

With Badge

<flux:avatar name="John Doe" badge="3" />
<flux:avatar name="John Doe" badge badge:color="green" />
<flux:avatar name="John Doe">
    <flux:badge slot="badge" color="red" circle />
</flux:avatar>

<flux:avatar name="John Doe" tooltip />
<flux:avatar name="John Doe" tooltip="Profile picture" />

Avatar Group

Display multiple avatars in a group:

<flux:avatar.group>
    <flux:avatar name="John Doe" />
    <flux:avatar name="Jane Smith" />
    <flux:avatar name="Bob Johnson" />
</flux:avatar.group>

Props

Prop	Type	Default	Description
`name`	`string`	`null`	Name for initials generation
`src`	`string`	`null`	Image source URL
`icon`	`string`	`null`	Icon name from Heroicons
`initials`	`string`	`null`	Custom initials override
`size`	`string`	`'md'`	Size: xs, sm, md, lg, xl
`color`	`string`	`null`	Color: auto or any Tailwind color
`circle`	`bool`	`false`	Circular shape
`badge`	`string\|slot`	`null`	Badge content or slot
`tooltip`	`string\|bool`	`null`	Tooltip text
`href`	`string`	`null`	Make avatar clickable

Accessibility

All inputs include proper name attributes
Labels are associated with inputs
Error messages use aria-invalid and proper ARIA attributes
Keyboard navigation works as expected
Required fields can be marked visually
OTP inputs include proper ARIA labels for screen readers
Avatars include proper alt text when using images

Form components automatically extract the field name from wire:model for validation and error handling.

Get Started

Core Concepts

Components

Pro Components

CLI

​Input

​Basic Usage

​Input Types

​With Icons

​Sizes

​Variants

​Input Features

​Clearable

​Copyable

​Viewable

​Expandable

​Loading State

​Input Masking

​Input Props

​Textarea

​Basic Usage

​Rows

​Resize Behavior

​Select

​Basic Usage

​With Groups

​Checkbox

​Basic Usage

​Variants

​Checkbox Group

​Radio

​Basic Usage

​Variants

​Switch

​Field

​Basic Usage

​With Description

​Field Components

​Label

​Description

​Error

​Fieldset

​Validation

​OTP

​Basic Usage

​Private Mode

​Custom Length

​With Field Wrapper

​Props

​Avatar

​Basic Usage

​Sizes

​Colors

​Circle Shape

​With Badge

​With Tooltip

​Avatar Group

​Props

​Accessibility

Input

Basic Usage

Input Types

With Icons

Sizes

Variants

Input Features

Clearable

Copyable

Viewable

Expandable

Loading State

Input Masking

Input Props

Textarea

Basic Usage

Rows

Resize Behavior

Select

Basic Usage

With Groups

Checkbox

Basic Usage

Variants

Checkbox Group

Radio

Basic Usage

Variants

Switch

Field

Basic Usage

With Description

Field Components

Label

Description

Error

Fieldset

Validation

OTP

Basic Usage

Private Mode

Custom Length

With Field Wrapper

Props

Avatar

Basic Usage

Sizes

Colors

Circle Shape

With Badge

With Tooltip

Avatar Group

Props

Accessibility