Input

Examples

Default

The default text input field.

<%= render "ui/input", type: "email", placeholder: "Email" %>

<%= render UI::Input.new(type: "email", placeholder: "Email") %>

<%= render UI::InputComponent.new(type: "email", placeholder: "Email") %>

File

A file input field.

Picture

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render "ui/label", for: "picture" do %>Picture<% end %>
  <%= render "ui/input", id: "picture", type: "file" %>
</div>

Picture

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render UI::Label.new(for: "picture") { "Picture" } %>
  <%= render UI::Input.new(id: "picture", type: "file") %>
</div>

Picture

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render(UI::LabelComponent.new(for: "picture")) { "Picture" } %>
  <%= render UI::InputComponent.new(id: "picture", type: "file") %>
</div>

Disabled

A disabled input field.

<%= render "ui/input", type: "email", placeholder: "Email", disabled: true %>

<%= render UI::Input.new(type: "email", placeholder: "Email", disabled: true) %>

<%= render UI::InputComponent.new(type: "email", placeholder: "Email", disabled: true) %>

With Label

Input field with an associated label.

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render "ui/label", for: "email" do %>Email<% end %>
  <%= render "ui/input", type: "email", id: "email", placeholder: "Email" %>
</div>

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render UI::Label.new(for: "email") { "Email" } %>
  <%= render UI::Input.new(type: "email", id: "email", placeholder: "Email") %>
</div>

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render(UI::LabelComponent.new(for: "email")) { "Email" } %>
  <%= render UI::InputComponent.new(type: "email", id: "email", placeholder: "Email") %>
</div>

With Button

Input field with an associated button.

<div class="flex w-full max-w-sm items-center space-x-2">
  <%= render "ui/input", type: "email", placeholder: "Email" %>
  <%= render "ui/button", content: "Subscribe" %>
</div>

<div class="flex w-full max-w-sm items-center space-x-2">
  <%= render UI::Input.new(type: "email", placeholder: "Email") %>
  <%= render UI::Button.new { "Subscribe" } %>
</div>

<div class="flex w-full max-w-sm items-center space-x-2">
  <%= render UI::InputComponent.new(type: "email", placeholder: "Email") %>
  <%= render(UI::ButtonComponent.new) { "Subscribe" } %>
</div>

Features

Custom styling with Tailwind classes
Form integration
Disabled state support
ARIA attributes for accessibility

API Reference

Input

Parameters

Name	Type	Default	Description
type	String	text	The type
placeholder	String	nil	Placeholder text when no value is selected
value	String	nil	The current value
name	String	nil	Form field name
id	String	nil	HTML id attribute

Group

Shared behavior for InputGroup component across ERB, ViewComponent, and Phlex implementations.