TextField - Rails UI Components

Usage

<%= form_with url: root_path do |f| %>
  <%= f.text_field :name %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.phone_field :phone %>
<% end %>

Props

Prop	Type	Default	Description
`size`	`Symbol` `:sm` \| `:md` \| `:lg`	`:md`	Size of the text field.
`label`	`String \| false`	`humanized attribute name`	Custom label text. Set to `false` to hide the label.
`hint`	`String`	`nil`	Helper text displayed below the field.
`error`	`String`	`nil`	Manual error message. ActiveRecord errors are displayed automatically.
`required`	`Boolean`	`false`	Mark the field as required.
`disabled`	`Boolean`	`false`	Disable the field.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

TextField types

<%= form_with url: root_path do |f| %>
  <%= f.text_field :first_name, required: true %>
  <%= f.email_field :email, autocomplete: "email" %>
  <%= f.password_field :password, autocomplete: "current-password" %>
  <%= f.phone_field :phone, placeholder: "+1 (555) 123-4567" %>
<% end %>

TextField sizes

<%= form_with url: root_path do |f| %>
  <%= f.text_field :large_field, size: :lg %>
  <%= f.text_field :default_field %>
  <%= f.text_field :small_field, size: :sm %>
<% end %>

Label customization

<%= form_with url: root_path do |f| %>
  <%= f.text_field :custom_label, label: "Custom Label Text" %>
  <%= f.text_field :no_label, label: false, placeholder: "Field without label" %>
  <%= f.text_field :default_label %>
<% end %>

Hint messages

<%= form_with url: root_path do |f| %>
  <%= f.text_field :password, label: "Password", hint: "Must be at least 8 characters long" %>
  <%= f.email_field :email, hint: "We'll never share your email with anyone else" %>
<% end %>

Disabled State

<%= form_with url: root_path do |f| %>
  <%= f.text_field :disabled_field, value: "Disabled", disabled: true %>
<% end %>

Validation

<% user = User.new %>
<% user.errors.add(:first_name, "is required") %>
<%= form_with model: user, url: root_path do |f| %>
  <%= f.text_field :first_name, label: "Active Record Validations" %>
  <%= f.text_field :manual_error_field, error: "This field has a custom error", value: "Invalid Value" %>
<% end %>