Input

UI::Input

A text field with label, hint and error message, standalone or with a form builder.

# VelvetKit ## Input (`UI::Input`) A text field with label, hint and error message, standalone or with a form builder. Add it: `bin/rails generate velvetkit:add input` Also adds: `label`, `form_field` ### Arguments ```ruby UI::Input.new(type: :text, size: :default, variant: :default, label: nil, label_size: :default, label_weight: :medium, hint: nil, required: false, error: nil, disabled: false, form: nil, field: nil, class: nil, **html_attrs) ``` ### Example: All Sizes ```erb <div class="flex flex-col gap-3 max-w-sm"> <%= render(UI::Input.new(size: :sm, placeholder: "Small (sm)")) %> <%= render(UI::Input.new(size: :default, placeholder: "Default")) %> <%= render(UI::Input.new(size: :lg, placeholder: "Large (lg)")) %> </div> ``` ### Example: States ```erb <div class="flex flex-col gap-3 max-w-sm"> <%= render(UI::Input.new(placeholder: "Default")) %> <%= render(UI::Input.new(placeholder: "With value", value: "hello@example.com")) %> <%= render(UI::Input.new(placeholder: "Error state", variant: :error, error: true)) %> <%= render(UI::Input.new(placeholder: "Disabled", disabled: true)) %> <%= render(UI::Input.new(type: :password, placeholder: "Password")) %> </div> ``` ### Example: With Labels ```erb <div class="flex flex-col gap-4 max-w-sm"> <%= render(UI::Input.new(label: "Email", placeholder: "you@example.com")) %> <%= render(UI::Input.new(label: "Password", type: :password, placeholder: "Enter password")) %> <%= render(UI::Input.new(label: "Required field", required: true, placeholder: "Cannot be blank")) %> <%= render(UI::Input.new(label: "Required + error", required: true, error: true, variant: :error, placeholder: "Invalid value")) %> <%= render(UI::Input.new(label: "Disabled", disabled: true, placeholder: "Locked")) %> <%= render(UI::Input.new(label: "Small label", label_size: :sm, placeholder: "Small")) %> <%= render(UI::Input.new(label: "Large label", label_size: :lg, placeholder: "Large")) %> <%= render(UI::Input.new(label: "Semibold label", label_weight: :semibold, placeholder: "Bolder label")) %> </div> ``` ### Example: Hint and Error ```erb <div class="flex flex-col gap-6 max-w-sm"> <%= render(UI::Input.new(label: "Email", type: :email, hint: "We'll only use it to send receipts.")) %> <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %> </div> ```

bin/rails generate velvetkit:add input

Also adds: Label Form field
Stimulus: None, it's server-rendered
Installs: Nothing

Examples

All Sizes

sizes.html.erb

<div class="flex flex-col gap-3 max-w-sm">
  <%= render(UI::Input.new(size: :sm, placeholder: "Small (sm)")) %>
  <%= render(UI::Input.new(size: :default, placeholder: "Default")) %>
  <%= render(UI::Input.new(size: :lg, placeholder: "Large (lg)")) %>
</div>

States

states.html.erb

<div class="flex flex-col gap-3 max-w-sm">
  <%= render(UI::Input.new(placeholder: "Default")) %>
  <%= render(UI::Input.new(placeholder: "With value", value: "hello@example.com")) %>
  <%= render(UI::Input.new(placeholder: "Error state", variant: :error, error: true)) %>
  <%= render(UI::Input.new(placeholder: "Disabled", disabled: true)) %>
  <%= render(UI::Input.new(type: :password, placeholder: "Password")) %>
</div>

With Labels

Password

Required field *

Required + error *

Disabled

Small label

Large label

Semibold label

with_labels.html.erb

<div class="flex flex-col gap-4 max-w-sm">
  <%= render(UI::Input.new(label: "Email", placeholder: "you@example.com")) %>
  <%= render(UI::Input.new(label: "Password", type: :password, placeholder: "Enter password")) %>
  <%= render(UI::Input.new(label: "Required field", required: true, placeholder: "Cannot be blank")) %>
  <%= render(UI::Input.new(label: "Required + error", required: true, error: true, variant: :error, placeholder: "Invalid value")) %>
  <%= render(UI::Input.new(label: "Disabled", disabled: true, placeholder: "Locked")) %>
  <%= render(UI::Input.new(label: "Small label", label_size: :sm, placeholder: "Small")) %>
  <%= render(UI::Input.new(label: "Large label", label_size: :lg, placeholder: "Large")) %>
  <%= render(UI::Input.new(label: "Semibold label", label_weight: :semibold, placeholder: "Bolder label")) %>
</div>

Hint and Error

We'll only use it to send receipts.

Username

Use at least 3 characters.

hint_and_error.html.erb

<div class="flex flex-col gap-6 max-w-sm">
  <%= render(UI::Input.new(label: "Email", type: :email, hint: "We'll only use it to send receipts.")) %>
  <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %>
</div>

API

Arguments

UI::Input.new(type: :text, size: :default, variant: :default, label: nil, label_size: :default, label_weight: :medium, hint: nil, required: false, error: nil, disabled: false, form: nil, field: nil, class: nil, **html_attrs)