Input

Displays a form field, or a component that looks like a text field.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add input --yes

The input registry item installs these files:

app/components/ui_component.rb
app/components/ui/input_component.rb
app/helpers/ui/input_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Use the ui_input helper in any view. <input> is a void element, so the helper takes no block: everything, including the value, goes in attributes.

<%= ui_input(type: :email, placeholder: "you@example.com") %>

Or render the component Ui::InputComponent directly:

<%= render Ui::InputComponent.new(type: :email, name: "user[email]") %>

Examples

Default

A text field in the shadcn style. Any HTML attribute you pass goes to the <input>.

<%= ui_input(type: :email, placeholder: "Email", class: "max-w-sm") %>

With a label

Pair it with ui_label using for:/id: to tie the label to the field.

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "input-with-label-email") { "Email" } %>
  <%= ui_input(type: :email, id: "input-with-label-email", placeholder: "you@example.com") %>
</div>

Disabled

Pass disabled: true as an HTML attribute.

<%= ui_input(placeholder: "Disabled", disabled: true, class: "max-w-sm") %>

File

type: :file styles the native file picker.

Picture

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "input-file-picture") { "Picture" } %>
  <%= ui_input(type: :file, id: "input-file-picture") %>
</div>

With form_with

Use form.field_name/form.field_id to wire it into Rails forms.

<%= form_with url: "#", scope: :newsletter do |form| %>
  <div class="flex w-full max-w-sm items-center gap-2">
    <%= ui_input(
          type: :email,
          name: form.field_name(:email),
          id: form.field_id(:email),
          placeholder: "you@example.com",
          aria: { label: "Email" }

<%= form_with url: "#", scope: :newsletter do |form| %>
  <div class="flex w-full max-w-sm items-center gap-2">
    <%= ui_input(
          type: :email,
          name: form.field_name(:email),
          id: form.field_id(:email),
          placeholder: "you@example.com",
          aria: { label: "Email" }
        ) %>
    <%= ui_button(type: :submit, variant: :outline) { "Subscribe" } %>
  </div>
<% end %>

API reference

ui_input(**options) wraps Ui::InputComponent.new(**options).

Argument	Type	Default	Description
`type`	Symbol/String	`:text`	Any native input type (`:email`, `:password`, `:file`, `:number`, …).
`class` / `class_name`	String	`nil`	Extra classes, merged after the base classes.
`**attrs`	Hash	`{}`	Free HTML attributes (`name`, `id`, `placeholder`, `disabled`, `required`, `data:`, `aria:`, …).