Text Inputs

Here are some examples showcasing text input components.

Basic Text Input

Text inputs allow users to enter text data.

Username

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "text1", title: "Username")
  = daisy_text_input(name: "text1", id: "text1")

Different Input Types

Text inputs can have different types such as password, email, number, etc.

Preview

Password Email Number

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "password", title: "Password")
  = daisy_text_input(name: "password", id: "password", type: "password", css: "input-bordered")

  = daisy_label(for: "email", title: "Email", css: "mt-4")
  = daisy_text_input(name: "email", id: "email", type: "email", css: "input-bordered")

  = daisy_label(for: "number", title: "Number", css: "mt-4")
  = daisy_text_input(name: "number", id: "number", type: "number", css: "input-bordered")

Text Inputs with Placeholder

Text inputs can have placeholder text to provide hints to users.

Preview

Search Email

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "search", title: "Search")
  = daisy_text_input(name: "search", id: "search", placeholder: "Type here to search...", css: "input-bordered")

  = daisy_label(for: "email-placeholder", title: "Email", css: "mt-4")
  = daisy_text_input(name: "email-placeholder", id: "email-placeholder", type: "email", placeholder: "example@mail.com", css: "input-bordered")

Text Input Sizes

Text inputs can have different sizes using the input-lg, input-md, input-sm, or input-xs classes.

Preview

Large Input Medium Input (default) Small Input Extra Small Input

Code

.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-bordered 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-bordered 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-bordered 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-bordered input-xs")

Text Input with Different Colors

Text inputs can be styled with additional CSS classes to change their appearance.

Preview

Primary Text Input Secondary Text Input Accent Text Input

Code

.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 input-bordered")

  = daisy_label(for: "input_secondary", title: "Secondary Text Input", css: "mt-4")
  = daisy_text_input(name: "input_secondary", id: "input_secondary", css: "input-secondary input-bordered")

  = daisy_label(for: "input_accent", title: "Accent Text Input", css: "mt-4")
  = daisy_text_input(name: "input_accent", id: "input_accent", css: "input-accent input-bordered")

Ghost Style Text Input

Text inputs can use the input-ghost class for a minimalist appearance that only shows borders on hover.

Preview

Ghost Style Text Input

Ghost style with background container:

Code

.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-teal-200
    %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...")

Disabled Text Input

Text inputs can be disabled using the disabled attribute.

Preview

Disabled Text Input

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "input_disabled", title: "Disabled Text Input", css: "cursor-not-allowed")
  = daisy_text_input(name: "input_disabled", id: "input_disabled", disabled: true, css: "input-bordered")

Required Text Input

Text inputs can be marked as required using the required attribute.

Preview

Required Text Input

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "input_required", title: "Required Text Input")
  = daisy_text_input(name: "input_required", id: "input_required", required: true, css: "input-bordered")

Text Input with Icons

Text inputs can be combined with icons and other elements using the start and end blocks, which appear before and after the input field.

Preview

Search with Icon Prefix

Email with Icon Suffix

Input with Both Icons

Code

.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...", css: "input-bordered") do |text_input|
    - text_input.with_start 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", css: "input-bordered") 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", css: "input-bordered") 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")

Rails Form Example

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.

Preview

Code

= 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, css: "input-bordered")

    = form.daisy_label(:email, "Email Address", css: "mt-4")
    = form.daisy_text_input(:email, type: "email", placeholder: "example@mail.com", css: "input-bordered")

    = form.daisy_label(:password, css: "mt-4")
    = form.daisy_text_input(:password, type: "password", css: "input-bordered")

Made with by Profoundry .