Blocks

Input

A single-line text field. Thin wrapper around the HTML <input> element with consistent styling.

Installation

bin/rails g shadcnrb:component input

Usage

<div class="w-[320px]">
  <%= sui.input placeholder: "Type something…" %>
</div>

Disabled

<div class="w-[320px]">
  <%= sui.input placeholder: "Disabled", disabled: true %>
</div>

Types

<div class="flex flex-col gap-3 w-[320px]">
  <%= sui.input type: "email", placeholder: "[email protected]" %>
  <%= sui.input type: "password", placeholder: "••••••••" %>
  <%= sui.input type: "number", placeholder: "42" %>
</div>

With label

<div class="space-y-2 w-[320px]">
  <%= sui.label "Email", for_id: "email" %>
  <%= sui.input type: "email", id: "email", placeholder: "[email protected]" %>
</div>

Full form field pattern

Username

Password

<div class="space-y-4 w-[320px]">
  <div class="space-y-2">
    <%= sui.label "Username", for_id: "username" %>
    <%= sui.input id: "username", placeholder: "johndoe" %>
  </div>
  <div class="space-y-2">
    <%= sui.label "Password", for_id: "password" %>
    <%= sui.input type: "password", id: "password", placeholder: "••••••••" %>
  </div>
  <%= sui.button "Sign in", class: "w-full" %>
</div>

API

name	type	default	description
`type`	String	`"text"`	HTML input type. Any valid value: `email`, `password`, `number`, `file`, etc.
`placeholder`	String	`nil`	Placeholder text shown when the field is empty.
`disabled`	Boolean	`false`	Disables the field; applies muted styling via `disabled:opacity-50`.
`id`	String	`nil`	Sets the element id; used with `sui.label for_id:` to link label and input.
`**opts`	Hash	—	Any additional HTML attribute (`name`, `value`, `autofocus`, `data-*`, …).