Form Inputs
Text inputs, number inputs, password fields, and textareas with full customization support.
Text Input - Basic
Simple text inputs with label, placeholder, and hint text.
Choose a unique username
As it appears on your ID
<%= bui_text_input("username",
label: "Username",
placeholder: "Enter your username",
hint: "Choose a unique username") %>
<%= bui_text_input("full_name",
label: "Full Name",
placeholder: "John Doe",
hint: "As it appears on your ID") %>Text Input - Types
Different input types for specific data formats: text, email, tel, date, and time.
<%= bui_text_input("name", label: "Text", placeholder: "Plain text input") %>
<%= bui_email_input("email", label: "Email", placeholder: "you@example.com") %>
<%= bui_tel_input("phone", label: "Phone", placeholder: "+1 (555) 000-0000") %>
<%= bui_date_input("birthday", label: "Birthday") %>
<%= bui_time_input("start_time", label: "Start Time") %>Text Input - Sizes
Five size variants from extra-small to extra-large.
<%= bui_text_input("field", label: "Extra Small", size: :xs) %>
<%= bui_text_input("field", label: "Small", size: :sm) %>
<%= bui_text_input("field", label: "Medium (default)", size: :md) %>
<%= bui_text_input("field", label: "Large", size: :lg) %>
<%= bui_text_input("field", label: "Extra Large", size: :xl) %>Text Input - States
Disabled, readonly, required, and error states.
Email format is invalid
Must contain an @ symbol
<%= bui_text_input("field", label: "Disabled", disabled: true) %>
<%= bui_text_input("field", label: "Readonly", value: "Read-only value", readonly: true) %>
<%= bui_text_input("field", label: "Required", required: true) %>
<%= bui_text_input("field", label: "With Errors",
value: "invalid-email",
errors: ["Email format is invalid", "Must contain an @ symbol"]) %>Text Input - With Icons
Prefix and suffix icon slots for decorative or functional indicators.
<%= bui_text_input("search", label: "Search", placeholder: "Search...") do |input| %>
<% input.with_prefix_icon do %>
<svg class="w-5 h-5 text-grayscale-400" ...>...</svg>
<% end %>
<% end %>
<%= bui_text_input("verified", label: "Verified", value: "verified@example.com") do |input| %>
<% input.with_suffix_icon do %>
<svg class="w-5 h-5 text-success-500" ...>...</svg>
<% end %>
<% end %>Number Input
Numeric inputs with min/max/step constraints, prefix icons, and optional spinner controls.
Between 0 and 100
$
Enter the price in dollars
kg
Spinner arrows hidden
<%= bui_number_input("quantity", label: "Quantity", min: 0, max: 100, step: 1) %>
<%= bui_number_input("price", label: "Price", step: 0.01) do |input| %>
<% input.with_prefix_icon { "$" } %>
<% end %>
<%= bui_number_input("weight", label: "Weight", min: 0, step: 0.1) do |input| %>
<% input.with_suffix_icon { "kg" } %>
<% end %>
<%= bui_number_input("rating", label: "Rating", min: 1, max: 5, show_spinner: false) %>Password Input
Password fields with built-in visibility toggle powered by Stimulus.
Minimum 8 characters
Must match the password above
<%= bui_password_input("password",
label: "Password",
placeholder: "Enter your password",
hint: "Minimum 8 characters") %>
<%= bui_password_input("confirm_password",
label: "Confirm Password",
placeholder: "Re-enter your password",
hint: "Must match the password above") %>Textarea
Multi-line text areas with configurable rows, character limits, and resize behavior.
Maximum 500 characters
No character limit
Resize Options
<%= bui_textarea("bio",
label: "Bio",
rows: 4,
maxlength: 500,
hint: "Maximum 500 characters",
resize: :vertical) %>
<%= bui_textarea("notes", label: "No resize", rows: 3, resize: :none) %>
<%= bui_textarea("notes", label: "Vertical resize", rows: 3, resize: :vertical) %>
<%= bui_textarea("notes", label: "Both directions", rows: 3, resize: :both) %>