shadcn-rails

Input

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

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component input

Usage

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

Examples

Default

With Label

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

Input Types

File

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

Disabled

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

With Button

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