Form | Maquina

Usage

<%= form_with model: @user, data: { component: "form" } do |f| %>
  <div data-form-part="group">
    <%= f.label :email, data: { component: "label" } %>
    <%= f.email_field :email, data: { component: "input" }, placeholder: "you@example.com" %>
  </div>

  <%= f.submit "Sign in", data: { component: "button", variant: "primary" } %>
<% end %>

Examples

Input

<%= f.text_field :name, data: { component: "input" }, placeholder: "Full name" %>
<%= f.text_field :name, data: { component: "input", size: "sm" } %>
<%= f.text_field :name, data: { component: "input", size: "lg" } %>

Textarea

<%= f.text_area :bio, data: { component: "textarea" }, rows: 4 %>

Select

<%= f.select :country, options, {}, data: { component: "select" } %>

Checkbox

<label class="flex items-center gap-2">
  <%= f.check_box :terms, data: { component: "checkbox" } %>
  <span class="text-sm">Accept terms</span>
</label>

Radio

<label class="flex items-center gap-2">
  <%= f.radio_button :plan, "pro", data: { component: "radio" } %>
  <span class="text-sm">Pro</span>
</label>

Switch

<label class="flex items-center gap-3">
  <%= f.check_box :notifications, data: { component: "switch" } %>
  <span class="text-sm">Enable notifications</span>
</label>

Button

<button data-component="button" data-variant="primary">Primary</button>
<button data-component="button" data-variant="secondary">Secondary</button>
<button data-component="button" data-variant="destructive">Destructive</button>
<button data-component="button" data-variant="outline">Outline</button>
<button data-component="button" data-variant="ghost">Ghost</button>
<button data-component="button" data-variant="link">Link</button>

API Reference

Form Container

Attribute	Description
data-component="form"	Grid layout with gap
data-form-part="group"	Field group container
data-form-part="description"	Help text styling
data-form-part="error"	Error message styling
data-form-part="actions"	Submit area container

Input

Attribute	Values	Description
data-component	input	Text input styling
data-size	sm, lg	Size variant

Textarea

Attribute	Values	Description
data-component	textarea	Textarea styling

Select

Attribute	Values	Description
data-component	select	Native select styling

Checkbox

Attribute	Values	Description
data-component	checkbox	Checkbox styling

Radio

Attribute	Values	Description
data-component	radio	Radio button styling

Switch

Attribute	Values	Description
data-component	switch	Toggle switch styling

Label

Attribute	Values	Description
data-component	label	Label styling
data-required	(presence)	Shows required indicator

Button

Attribute	Values	Description
data-component	button	Button styling
data-variant	primary, secondary, destructive, outline, ghost, link	Visual style
data-size	sm, lg, icon, icon-sm, icon-lg	Size variant