Input

Standard text input fields, including password and number variants.

Examples

Basic Input

blade

<x-plume::form 
    formData="{ 'username': '' }">
    <x-plume::form.input label="Username" model="username" placeholder="johndoe" />
</x-plume::form>

With Icon

blade

<x-plume::form 
    formData="{ 'email': '' }">
    <x-plume::form.input label="Email" model="email" type="email" placeholder="you@example.com"
        icon="icon-[fluent--mail-24-regular]" />
</x-plume::form>

Password

blade

<x-plume::form 
    formData="{ 'password': '' }">
    <x-plume::form.password label="Password" model="password" />
</x-plume::form>

Number

blade

<x-plume::form 
    formData="{ 'quantity': 1 }">
    <x-plume::form.number label="Quantity" model="quantity" min="1" max="10" />
</x-plume::form>

Properties

Input

Prop	Type	Default	Description
label	string	null	The label for the input field.
name	string	null	HTML name attribute. Auto-prefixed if using x-plume::form.
id	string	null	HTML id attribute. Auto-generated from name if not provided.
model	string	null	AlpineJS model name (relative to formData). Enables two-way binding.
value	string	''	Initial value for the input. Ignored if $model is used.
placeholder	string	''	Placeholder text.
type	string	'text'	HTML input type (text, email, tel, etc.).
icon	string	null	Iconify icon name to display inside the input.

Password

Prop	Type	Default	Description
label	string	null	The label for the password input.
name	string	null	HTML name attribute.
id	string	null	HTML id attribute. Auto-generated if not provided.
model	string	null	AlpineJS model name for two-way binding.
value	string	''	Initial password value. Ignored if $model is used.
placeholder	string	''	Placeholder text.
icon	string	'icon-[fluent--lock-closed-24-regular]'	Iconify icon name.

Number

Prop	Type	Default	Description
label	string	null	The label for the number input.
name	string	null	HTML name attribute.
id	string	null	HTML id attribute. Auto-generated from name if not provided.
model	string	null	AlpineJS model name for two-way binding.
value	string	null	Initial numeric value. Ignored if $model is used.
min	int	null	Minimum allowed value.
max	int	null	Maximum allowed value.
step	int	null	Incremental step value.
placeholder	string	''	Placeholder text.

Usage

blade

<x-plume::form >
    <x-plume::form.input label="Username" model="username" />
    <x-plume::form.password label="Password" model="password" />
    <x-plume::form.number label="Age" model="age" :min="0" />
</x-plume::form>