Text Areas

API Docs

Here are some examples showcasing textarea components.

Note

Text areas have a border by default. Use textarea-ghost to remove the border.

Basic Text Area

Text areas allow users to enter multiple lines of text.

Preview

Message

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "message1", title: "Message")
  = daisy_text_area(name: "message1", id: "message1")

Text Area with Placeholder

You can add placeholder text to guide users on what to enter.

Preview

Feedback

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "feedback", title: "Feedback")
  = daisy_text_area(name: "feedback", id: "feedback", placeholder: "Tell us what you think...")

Text Area with Initial Value

You can pre-populate a text area with an initial value.

Preview

Biography

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "bio", title: "Biography")
  = daisy_text_area(name: "bio", id: "bio", value: "I am a software developer with expertise in Ruby on Rails and JavaScript.")

Custom Rows

You can customize the height of the text area by specifying the number of rows.

Preview

Short Note (2 rows) Long Note (8 rows)

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "short_note", title: "Short Note (2 rows)")
  = daisy_text_area(name: "short_note", id: "short_note", rows: 2)

  = daisy_label(for: "long_note", title: "Long Note (8 rows)", css: "mt-4")
  = daisy_text_area(name: "long_note", id: "long_note", rows: 8)

Text Area with Different Colors

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

Preview

Primary Text Area Secondary Text Area Accent Text Area

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "textarea_primary", title: "Primary Text Area")
  = daisy_text_area(name: "textarea_primary", id: "textarea_primary", css: "textarea-primary")

  = daisy_label(for: "textarea_secondary", title: "Secondary Text Area", css: "mt-4")
  = daisy_text_area(name: "textarea_secondary", id: "textarea_secondary", css: "textarea-secondary")

  = daisy_label(for: "textarea_accent", title: "Accent Text Area", css: "mt-4")
  = daisy_text_area(name: "textarea_accent", id: "textarea_accent", css: "textarea-accent")

Borderless (Ghost) Text Area

Use textarea-ghost to remove the border from a text area. This creates a minimalist appearance that only shows borders on hover.

Preview

Ghost Style Text Area

Ghost style with background container:

Your Message

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "textarea_ghost", title: "Ghost Style Text Area")
  = daisy_text_area(name: "textarea_ghost", id: "textarea_ghost", css: "textarea-ghost")

  .mt-4.p-4.border.rounded-lg.bg-teal-200
    %p.text-sm.mb-2 Ghost style with background container:
    = daisy_label(for: "textarea_ghost_bg", title: "Your Message")
    = daisy_text_area(name: "textarea_ghost_bg", id: "textarea_ghost_bg", css: "textarea-ghost")

Disabled Text Area

Text areas can be disabled using the disabled attribute.

Preview

Disabled Text Area

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "textarea_disabled", title: "Disabled Text Area", css: "cursor-not-allowed")
  = daisy_text_area(name: "textarea_disabled", id: "textarea_disabled", disabled: true, value: "This text area is disabled and cannot be edited.")

Read-only Text Area

Text areas can be set to read-only using the readonly attribute, allowing users to see but not edit the content.

Preview

Read-only Text Area

This text area is read-only. You can select the text but cannot edit it.

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "textarea_readonly", title: "Read-only Text Area")
  = daisy_text_area(name: "textarea_readonly", id: "textarea_readonly", readonly: true, value: "This text area is read-only. You can select the text but cannot edit it.")

Required Text Area

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

Preview

Required Text Area

Code

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "textarea_required", title: "Required Text Area")
  = daisy_text_area(name: "textarea_required", id: "textarea_required", required: true)

Rails Form Example

The built-in Form Builder extension provides an easy way to use text areas 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(:bio)
    = form.daisy_text_area(:bio)

    = form.daisy_label(:comments, "Additional Comments", css: "mt-4")
    = form.daisy_text_area(:comments, rows: 6, placeholder: "Share your thoughts...")

Made with by Profoundry .

Text Areas

Basic Text Area

Text Area with Placeholder

Text Area with Initial Value

Custom Rows

Text Area with Different Colors

Borderless (Ghost) Text Area

Disabled Text Area

Read-only Text Area

Required Text Area

Rails Form Example

Docs

Guides

Hero

Daisy