Multi-line text input components for collecting longer user responses, comments, and descriptions. Perfect for forms, feedback sections, and content creation with customizable sizing, styling, validation states, and seamless Rails form integration.
Text areas have a border by default. Use textarea-ghost to remove the
border.
Text areas allow users to enter multiple lines of text.
You can add placeholder text to guide users on what to enter.
You can pre-populate a text area with an initial value.
You can customize the height of the text area by specifying the number of rows.
.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 areas can be styled with additional CSS classes to change their appearance.
.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")
Use textarea-ghost to remove the border from a text area. This creates a
minimalist appearance that only shows borders on hover.
Ghost style with background container:
Ghost style with background container:
.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")
Text areas can be disabled using the disabled attribute.
Text areas can be set to read-only using the readonly attribute, allowing users to see but not edit the content.
Text areas can be marked as required using the required attribute.
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.
= 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...")
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.