ddfsn / blade-components
Github
  1. Blade Components
  5. Input

Input

Displays a form input field for capturing user data with various forms of text 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.

<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

Captions and descriptions can be added to the form control by supplying the label="" and description="" attribute.

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.

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>

Previous

Typography

Next

Select