Input

Where you type stuff in, like your name or email address, into boxes on a form.

Adding the component

php artisan spur:add forms/input forms/field forms/label

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'forms/input',
  'forms/field',
  'forms/label',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Input

<x-spur.input placeholder="Email Address"/>

With Label

<x-spur.field id="email">
    <x-spur.label>Email Address</x-spur.label>
    <x-spur.input placeholder="Email Address" name="email" />
</x-spur.field>

With Label and Description

Please write in your email address here

<x-spur.field id="email">
    <x-spur.label>Email Address</x-spur.label>
    <x-spur.input placeholder="Email Address" name="email" />
    <x-spur.description>Please write in your email address here</x-spur.description>
</x-spur.field>

Inline Field

Please write in your email address here

<x-spur.field id="email">
    <x-spur.label>Email Address</x-spur.label>
    <x-spur.input placeholder="Email Address" name="email" />
    <x-spur.description>Please write in your email address here</x-spur.description>
</x-spur.field>

Disabled Input

Please write in your email address here

<x-spur.field id="email" disabled>
    <x-spur.label>Email Address</x-spur.label>
    <x-spur.input placeholder="Email Address" name="email" />
    <x-spur.description>Please write in your email address here</x-spur.description>
</x-spur.field>

Invalid Input

Please write in your email address here

<x-spur.field id="email" invalid>
    <x-spur.label>Email Address</x-spur.label>
    <x-spur.input placeholder="Email Address" name="email" />
    <x-spur.description>Please write in your email address here</x-spur.description>
</x-spur.field>