Labels

Labels provide a useful description for various kinds of inputs.

Basic Labels

Labels are used to provide text descriptions for form inputs. They can be used with any form input component.

Standard Label Content Block Label

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "input1", title: "Standard Label")

  = daisy_label(for: "input2") do
    Content Block Label

With Form Inputs

Labels can be used with form inputs to provide a description for the input. Here's an example with a checkbox.

Preview

I accept the terms and conditions

Code

.my-2.flex.flex-col.gap-4
  .flex.items-center.space-x-2
    = daisy_checkbox(name: "accept", id: "accept")
    = daisy_label(for: "accept", title: "I accept the terms and conditions")

LabelableComponent Functionality

Many of our input components include the LabelableComponent concern, which provides built-in label functionality without needing separate label components. This makes your code cleaner and ensures proper semantic markup.

The TextInput , Select , Checkbox , and Toggle components include this functionality.

Preview

Start Labels (appear before the input)

Username:

Country:

Code

.my-2.flex.flex-col.gap-4
  %p.font-medium.mb-2 Start Labels (appear before the input)
  = daisy_text_input(name: "username", id: "username", start: "Username:")
  .mt-4
    = daisy_select(name: "country", id: "country", start: "Country:", options: ["USA", "Canada", "UK"])

End Labels

End labels appear after the input. They are especially useful for checkboxes and toggles, but can be used with any input component that includes the LabelableComponent concern.

Preview

I agree to the terms and conditions

Enable notifications

@example.com

Code

.my-2.flex.flex-col.gap-4
  = daisy_checkbox(name: "terms", id: "terms", end: "I agree to the terms and conditions")
  .mt-4
    = daisy_toggle(name: "notifications", id: "notifications", end: "Enable notifications")
  .mt-4
    = daisy_text_input(name: "email", id: "email", end: "@example.com")

Floating Labels

Floating labels appear above the input when it has focus or contains a value. This provides a clean, modern look while maintaining good UX.

Preview

Email Address

Preferred Language

Code

.my-2.flex.flex-col.gap-4
  = daisy_text_input(name: "email", id: "email_floating", floating: "Email Address", placeholder: "example@domain.com")
  .mt-4
    = daisy_select(name: "language", id: "language_floating", floating: "Preferred Language", options: ["English", "Spanish", "French"])

Custom Label Content

For more complex labels, you can use the slot API to provide custom content to your labels. This is useful when you need to add HTML or other components within your label.

Preview

Password *

Subscribe to newsletter (Optional)

Code

.my-2.flex.flex-col.gap-4
  = daisy_text_input(name: "password", id: "password", type: "password") do |input|
    - input.with_start do
      Password
      %span.text-error.ml-1 *

  .mt-4
    = daisy_checkbox(name: "newsletter", id: "newsletter") do |cb|
      - cb.with_end do
        Subscribe to newsletter
        %span.text-xs.text-gray-500.ml-1 (Optional)

Form Builder Example

We've also extended the standard Rails FormBuilder with custom helper methods for rendering Daisy Inputs with labels.

Preview

Code

= form_with(url: "#", class: "my-2 flex flex-col gap-4") do |f|
  = f.daisy_text_input :name, floating_placeholder: "Name"
  = f.daisy_text_input :email, type: :email, floating_placeholder: "Email"

Made with by Profoundry .

Labels

Basic Labels

With Form Inputs

LabelableComponent Functionality

End Labels

Floating Labels

Custom Label Content

Form Builder Example

Docs

Guides

Hero

Daisy