shadcn-rails

Input

Displays a form input field or a component that looks like an input field.

No JavaScript Required
input/default 
<%= render Shadcn::InputComponent.new(placeholder: "Enter text...") %>

Installation

Add the component to your project:

rails generate shadcn:add input

Usage

<%= render Shadcn::InputComponent.new(placeholder: "Enter text...") %>

Examples

Default

<%= render Shadcn::InputComponent.new(placeholder: "Enter text...") %>

With Label

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

Input Types

<div class="grid gap-4 max-w-sm">
  <div class="grid gap-1.5">
    <%= render Shadcn::LabelComponent.new(for: "text-demo") { "Text" } %>
    <%= render Shadcn::InputComponent.new(type: "text", id: "text-demo", placeholder: "Enter text") %>
  </div>
  <div class="grid gap-1.5">
    <%= render Shadcn::LabelComponent.new(for: "password-demo") { "Password" } %>
    <%= render Shadcn::InputComponent.new(type: "password", id: "password-demo", placeholder: "Enter password") %>
  </div>
  <div class="grid gap-1.5">
    <%= render Shadcn::LabelComponent.new(for: "number-demo") { "Number" } %>
    <%= render Shadcn::InputComponent.new(type: "number", id: "number-demo", placeholder: "0") %>
  </div>
  <div class="grid gap-1.5">
    <%= render Shadcn::LabelComponent.new(for: "date-demo") { "Date" } %>
    <%= render Shadcn::InputComponent.new(type: "date", id: "date-demo") %>
  </div>
</div>

File

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

Disabled

<%= render Shadcn::InputComponent.new(disabled: true, placeholder: "Disabled") %>

With Button

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

Email

input/email 
<%= render Shadcn::InputComponent.new(type: "email", placeholder: "email@example.com") %>

Password

input/password 
<%= render Shadcn::InputComponent.new(type: "password", placeholder: "Enter password") %>

Search

input/search 
<%= render Shadcn::InputComponent.new(type: "search", placeholder: "Search...") %>

Number

input/number 
<%= render Shadcn::InputComponent.new( type: "number", min: min, max: max, step: step, placeholder: "0" ) %>

With Validation

input/with_validation 
<%= render Shadcn::InputComponent.new( type: "email", placeholder: "email@example.com", required: true, pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$" ) %>

API Reference

API Reference

Prop Type Default Description
type String "text" Input type (text, email, password, number, date, file, etc.)
name String nil Input name attribute
id String nil Input id attribute
value String nil Input value
placeholder String nil Placeholder text
disabled Boolean false Whether the input is disabled
required Boolean false Whether the input is required
readonly Boolean false Whether the input is readonly
autofocus Boolean false Whether to autofocus the input
autocomplete String nil Autocomplete attribute value
min String/Integer nil Minimum value (for number/date inputs)
max String/Integer nil Maximum value (for number/date inputs)
minlength Integer nil Minimum character length
maxlength Integer nil Maximum character length

Accessibility

  • Uses native <input> element for proper keyboard and screen reader support
  • Always pair inputs with LabelComponent for accessibility
  • Use the for attribute on labels to associate them with inputs
  • Disabled state uses native disabled attribute
  • Required fields should use required: true for validation