Text fields and fieldset

The LearnUp course sign-up form consists of input fields, captions and a button. In daisyUI an input has its own component — input, a multi-line field has textarea, and captions and grouping come from the fieldset component.

An input

The input class goes right on the <input>:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<input type="text" placeholder="Your name" class="input">

A field with a border, rounded corners and a highlight on focus. The input-primary, input-error and other modifiers change the border color, and input-sm, input-lg change the size. A multi-line field is styled the same way: <textarea class="textarea">.

Captions and fieldset

A fieldset is an HTML tag that groups related fields, and a legend is the group heading. daisyUI gives them the fieldset and fieldset-legend classes, and captions and hints inside are styled with the label class:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<fieldset class="fieldset w-xs rounded-box border border-base-300 bg-base-200 p-4">
  <legend class="fieldset-legend">Course sign-up</legend>
 
  <label class="label" for="name">Name</label>
  <input id="name" type="text" class="input" placeholder="Anna">
 
  <label class="label" for="email">Email</label>
  <input id="email" type="email" class="input" placeholder="anna@example.com">
  <p class="label">We will send the course link to this address.</p>
 
  <button class="btn btn-primary mt-4">Enroll</button>
</fieldset>

A grey panel with a "Course sign-up" heading, two captioned fields, a pale hint and a button. fieldset lays its items out in a column with even gaps by itself, and w-xs is a Tailwind utility that sets the width. The for attribute on a caption links it to the field: clicking the word "Name" puts the cursor in the field.

A full-width field

Fields have a fixed width by default. The w-full utility stretches a field to the full width of its column:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<fieldset class="fieldset p-4">
  <legend class="fieldset-legend">Course review</legend>
  <textarea class="textarea w-full" placeholder="What did you like?"></textarea>
  <p class="label">No more than 500 characters.</p>
</fieldset>

The multi-line field spans the whole page width, with a hint under it.

Text inside the field

If you put input on a <label> and place the <input> inside it without a class, you can add text or an icon next to the field inside the border:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<label class="input m-4">
  <span class="label">https://</span>
  <input type="text" placeholder="anna.example.com">
</label>

A website field with a grey "https://" prefix inside the border. Now the <label> draws the border and focus ring, and the <input> takes the remaining space.

Common mistake

Looking for the form-control class from daisyUI 4 articles. Version 5 does not have it, nor label-text: an element with such a class simply gets no styles. Group fields in a fieldset, and style captions and hints with the label class.

Thanks for reading!