Text inputs allow you to enter various forms of text such as usernames, passwords, numbers, and more.
Text inputs can be used with or without labels.
Adding the label class to the start/end slots will apply a thin
separator between the label and the input.
.flex.flex-col.gap-4
= daisy_label("Basic Inputs")
= daisy_text_input(name: "username_input", id: "username_input", placeholder: "Username")
= daisy_text_input(name: "password_input", id: "password_input", placeholder: "Password")
= daisy_divider("OR")
.flex.flex-col.gap-2
= daisy_label(for: "url_input", title: "URL")
= daisy_text_input(name: "url_input", id: "url_input", start: "https://", start_css: "label")
.flex.flex-col.gap-2
= daisy_label(for: "email_input", title: "Email")
= daisy_text_input(name: "email_input", id: "email_input") do |text|
- text.with_end(css: "label") do
@gmail.com
Inputs can also utilize a floating label with or without a placeholder to control animation.
.flex.flex-col.gap-4
.space-y-4
= daisy_text_input(name: "first_name_input", id: "first_name_input", floating: "First Name")
= daisy_text_input(name: "last_name_input", id: "last_name_input", floating: "Last Name")
= daisy_divider("OR")
.space-y-4
= daisy_text_input(name: "phone_floating_input", id: "phone_floating_input", floating: "Phone Number", placeholder: "ph: (123) 456-7890")
= daisy_text_input(name: "fax_floating_input", id: "fax_floating_input", floating: "Fax", placeholder: "fax: (123) 456-7890")
Text inputs can have different types such as password, email, number, etc.
.my-2.flex.flex-col.gap-4
= daisy_label(for: "email", title: "Email", css: "mt-4")
= daisy_text_input(name: "email", id: "email", type: "email")
= daisy_label(for: "password", title: "Password")
= daisy_text_input(name: "password", id: "password", type: "password")
= daisy_label(for: "number", title: "Number", css: "mt-4")
= daisy_text_input(name: "number", id: "number", type: "number")
= daisy_label(for: "date", title: "Date", css: "mt-4")
= daisy_text_input(name: "date", id: "date", type: "date")
.text-sm.text-right
%span{ class: "text-base-content/50" } See also:
= component_link("Cally Input", "Daisy::DataInput::CallyInputComponent")
= daisy_label(for: "time", title: "Time", css: "mt-4")
= daisy_text_input(name: "time", id: "time", type: "time")
= daisy_label(for: "datetime-local", title: "Datetime Local", css: "mt-4")
= daisy_text_input(name: "datetime-local", id: "datetime-local", type: "datetime-local")
Text inputs can have different sizes using the input-lg, input-md, input-sm, or input-xs classes.
.my-2.flex.flex-col.gap-4
= daisy_label(for: "input-lg", title: "Large Input")
= daisy_text_input(name: "input-lg", id: "input-lg", placeholder: "Large input", css: "input-lg")
= daisy_label(for: "input-md", title: "Medium Input (default)", css: "mt-4")
= daisy_text_input(name: "input-md", id: "input-md", placeholder: "Medium input", css: "input-md")
= daisy_label(for: "input-sm", title: "Small Input", css: "mt-4")
= daisy_text_input(name: "input-sm", id: "input-sm", placeholder: "Small input", css: "input-sm")
= daisy_label(for: "input-xs", title: "Extra Small Input", css: "mt-4")
= daisy_text_input(name: "input-xs", id: "input-xs", placeholder: "Extra small input", css: "input-xs")
Text inputs can be styled with additional CSS classes to change their appearance.
.my-2.flex.flex-col.gap-4
= daisy_label(for: "input_primary", title: "Primary Text Input")
= daisy_text_input(name: "input_primary", id: "input_primary", css: "input-primary")
= daisy_label(for: "input_secondary", title: "Secondary Text Input", css: "mt-4")
= daisy_text_input(name: "input_secondary", id: "input_secondary", css: "input-secondary")
= daisy_label(for: "input_accent", title: "Accent Text Input", css: "mt-4")
= daisy_text_input(name: "input_accent", id: "input_accent", css: "input-accent")
Text inputs can use the input-ghost class to remove the border. The border
will appear on focus.
Ghost style with background container:
Ghost style with background container:
.my-2.flex.flex-col.gap-4
= daisy_label(for: "input_ghost", title: "Ghost Style Text Input")
= daisy_text_input(name: "input_ghost", id: "input_ghost", css: "input-ghost")
.mt-4.p-4.border.rounded-lg.bg-secondary.text-secondary-content
%p.text-sm.mb-2 Ghost style with background container:
= daisy_label(for: "input_ghost_bg", title: "Search")
= daisy_text_input(name: "input_ghost_bg", id: "input_ghost_bg", css: "input-ghost", placeholder: "Search the docs...")
Text inputs can be disabled using the disabled attribute.
Text inputs can be marked as required using the required attribute.
Text inputs can be combined with icons and other elements using the start and end
options or slots, which appear before and after the input field.
.my-2.flex.flex-col.gap-4
= daisy_label(for: "input_icon_prefix", title: "Search with Icon Prefix")
= daisy_text_input(name: "input_icon_prefix", id: "input_icon_prefix", placeholder: "Search...") do |text_input|
- text_input.with_start(css: "label") do
= hero_icon("magnifying-glass", size: 5, css: "text-gray-400")
= daisy_label(for: "input_icon_suffix", title: "Email with Icon Suffix", css: "mt-4")
= daisy_text_input(name: "input_icon_suffix", id: "input_icon_suffix", type: "email", placeholder: "Enter your email") do |text_input|
- text_input.with_end do
= hero_icon("envelope", size: 5, css: "text-gray-400")
= daisy_label(for: "input_icon_both", title: "Input with Both Icons", css: "mt-4")
= daisy_text_input(name: "input_icon_both", id: "input_icon_both", placeholder: "Username") do |text_input|
- text_input.with_start do
= hero_icon("user", size: 5, css: "text-gray-400")
- text_input.with_end do
= hero_icon("check", size: 5, css: "text-success")
The built-in Form Builder extension provides an easy way to use text inputs in your forms by extracting the name and ID attributes from the form object and attributes.
= form_with(url: "#", method: :post, scope: :user) do |form|
.my-2.flex.flex-col.gap-4
= form.daisy_label(:username)
= form.daisy_text_input(:username)
= form.daisy_label(:email, "Email Address", css: "mt-4")
= form.daisy_text_input(:email, type: "email", placeholder: "example@mail.com")
= form.daisy_label(:password, css: "mt-4")
= form.daisy_text_input(:password, type: "password")
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.