Back to Home

Form

Form component wrapper with automatic CSRF protection and HTTP method spoofing support

Basic Usage

The most basic form component with POST method by default:
<neura::form action="/submit" method="POST">
    <neura::input name="email" type="email" placeholder="Email" />
    <neura::button type="submit">Submit</neura::button>
</neura::form>

HTTP Methods

The form component supports all HTTP methods with automatic CSRF handling and method spoofing:

GET Method

POST Method (Default)

PUT Method

PATCH Method

DELETE Method

<!-- GET -->
<neura::form action="/search" method="GET">...</neura::form>

<!-- POST (default) -->
<neura::form action="/users" method="POST">...</neura::form>

<!-- PUT, PATCH, DELETE (with automatic @method) -->
<neura::form action="/users/1" method="PUT">...</neura::form>
<neura::form action="/users/1" method="PATCH">...</neura::form>
<neura::form action="/users/1" method="DELETE">...</neura::form>

Custom Spacing

Customize spacing between form elements with the spacing attribute:
<neura::form action="/submit" spacing="space-y-4">
    <!-- Content with custom spacing -->
</neura::form>

Complete Form Example

Complete form example with all elements:
<neura::form action="/users" method="POST">
    <neura::input name="name" placeholder="Full Name" />
    <neura::input name="email" type="email" placeholder="Email Address" />
    <neura::input name="password" type="password" placeholder="Password" />
    <neura::button type="submit" class="w-full">Create Account</neura::button>
</neura::form>

Best Practices

✓ Do

  • Always specify the action attribute to define the submission URL
  • Use the appropriate method (GET for searches, POST for creations, etc.)
  • Let the component automatically handle CSRF and method spoofing
  • Use the spacing attribute to customize spacing between fields

✗ Don't

  • Don't manually add @csrf - it's handled automatically
  • Don't manually add @method - it's handled automatically for PUT, PATCH, DELETE
  • Don't use POST for actions that don't modify data (use GET)
  • Don't forget the action attribute

Properties

Property Type Default Description
method string 'POST' HTTP method (GET, POST, PUT, PATCH, DELETE). PUT, PATCH, DELETE methods automatically use @method
action string|null null Form submission URL
spacing string 'space-y-6' CSS classes for spacing between elements (passed via class or spacing attribute)