Input

This will be publicly displayed.

Usage

<x-form-input name="username" />

Component API

Attribute	Default	Description
`id`	`null`	`string` \|\| `null` When omitted the ID will be automatically determined based on the the `name`, `x-model` or `wire:model` attribute.
`name` `x-model` `wire:model`	`null`	`string` \|\| `null` Name of the form control. One of `name`, `x-model` or `wire:model` is required.
`error-name`	`null`	`string` \|\| `null` Control the related validation message bag entry.
`label`	`null`	`string` \|\| `null` Optional caption for the form control.
`type`	`text`	`string` The input type of the form control.
`default`	`null`	`mixed` The default value. This replaces the reserved `value` attribute when used as a native form control.
`show-errors`	`true`	`bool` Whether error messages should be shown.
`mark-required`	`false`	`mixed` Adds a visual indicator informing the user the form control is required.
`column-span`	`1`	`int` Controls the grid column span of the form control.
`column-start`	`1`	`int` Controls the grid column start of the form control.

Types

Use any of the browser's input types for different situations.

Password

Date

<x-form-section>
    <x-form-input type="email" name="email" label="Email" />
    <x-form-input type="password" name="password" label="Password" />
    <x-form-input type="date" name="date" max="2999-12-31" label="Date" />
</x-form-section>

Labels and Description

Add captions and descriptions to the form control by setting the label and description attributes.

This will be publicly displayed.

<x-form-input type="email" name="public-email" label="Email" description="This will be publicly displayed." />

For more advanced formatting of the description the description slot can be used.

Invite Team Member

8 existing team members

<x-form-input type="email" name="email" label="Invite Team Member" placeholder="email@example.com">
    <x-slot:description>
        <div class="flex items-center justify-end gap-2">
            <x-paragraph size="xs" style="muted">
                8 existing team members
            </x-paragraph>
            <x-avatar.stack>
                <x-avatar size="xs" />
                <x-avatar size="xs" />
                <x-avatar size="xs" />
            </x-avatar.stack>
        </div>
    </x-slot:description>
</x-form-input>

Icons

The x-form-icon component offers pre-styled icon support. Icons can be added to the form control by utilizing the icon-prefix or icon-suffix slots.

<x-form-section grid-columns="2">
    <x-form-input name="search" placeholder="Search for user...">
        <x-slot:icon-prefix>
            <x-form-icon icon="heroicon-o-magnifying-glass" />
        </x-slot:icon-prefix>
    </x-form-input>

    <x-form-input name="filter" placeholder="Filter...">
        <x-slot:icon-suffix>
            <x-form-icon icon="heroicon-o-funnel" />
        </x-slot:icon-suffix>
    </x-form-input>
</x-form-section>

Prefix and Suffix

Form controls can be prefixed or suffixed with simple text elements for additional clarity.

Quantity

@example.com

<x-form-section>
    <x-form-input name="quantity" label="Quantity" type="number">
        <x-slot:prefix>
            Quantity
        </x-slot:prefix>
    </x-form-input>
    <x-form-input name="partial-email" label="Email">
        <x-slot:suffix>
            @example.com
        </x-slot:suffix>
    </x-form-input>
</x-form-section>

#Usage

#Component API

#Types

#Labels and Description

#Icons

#Prefix and Suffix