Label
Label is used to provide a name or title for an input field. Label can be placed before or after the field.
| Class name | Type | |
|---|---|---|
| label | Component | For styling the text next to an input field (or select) |
| floating-label | Component | For the parent of an input field (or select) and a span that floats above the input field when the field is focused |
<label class="$$input"> <span class="$$label">https://</span> <input type="text" placeholder="URL" /> </label>
<label class="$$input">
<span class="$$label">https://</span>
<input type="text" placeholder="URL" />
</label>
<label class="$$input">
<span class="$$label">https://</span>
<input type="text" placeholder="URL" />
</label>
<label class="$$input">
<span class="$$label">https://</span>
<input type="text" placeholder="URL" />
</label><label class="$$input"> <input type="text" placeholder="domain name" /> <span class="$$label">.com</span> </label>
<label class="$$input">
<input type="text" placeholder="domain name" />
<span class="$$label">.com</span>
</label>
<label class="$$input">
<input type="text" placeholder="domain name" />
<span class="$$label">.com</span>
</label>
<label class="$$input">
<input type="text" placeholder="domain name" />
<span class="$$label">.com</span>
</label><label class="$$select"> <span class="$$label">Type</span> <select> <option>Personal</option> <option>Business</option> </select> </label>
<label class="$$select">
<span class="$$label">Type</span>
<select>
<option>Personal</option>
<option>Business</option>
</select>
</label>
<label class="$$select">
<span class="$$label">Type</span>
<select>
<option>Personal</option>
<option>Business</option>
</select>
</label>
<label class="$$select">
<span class="$$label">Type</span>
<select>
<option>Personal</option>
<option>Business</option>
</select>
</label><label class="$$input"> <span class="$$label">Publish date</span> <input type="date" /> </label>
<label class="$$input">
<span class="$$label">Publish date</span>
<input type="date" />
</label>
<label class="$$input">
<span class="$$label">Publish date</span>
<input type="date" />
</label>
<label class="$$input">
<span class="$$label">Publish date</span>
<input type="date" />
</label><label class="$$floating-label"> <span>Your name</span> <input type="text" placeholder="Your name" class="$$input $$input-md" /> </label>
<label class="$$floating-label">
<span>Your name</span>
<input type="text" placeholder="Your name" class="$$input $$input-md" />
</label>
<label class="$$floating-label">
<span>Your name</span>
<input type="text" placeholder="Your name" class="$$input $$input-md" />
</label>
<label class="$$floating-label">
<span>Your name</span>
<input type="text" placeholder="Your name" class="$$input $$input-md" />
</label><label class="$$floating-label"> <input type="text" placeholder="" class="$$input $$input-xs" /> <span>Extra Small</span> </label> <label class="$$floating-label"> <input type="text" placeholder="" class="$$input $$input-sm" /> <span>Small</span> </label> <label class="$$floating-label"> <input type="text" placeholder="" class="$$input $$input-md" /> <span>Medium</span> </label> <label class="$$floating-label"> <input type="text" placeholder="" class="$$input $$input-lg" /> <span>Large</span> </label> <label class="$$floating-label"> <input type="text" placeholder="" class="$$input $$input-xl" /> <span>Extra Large</span> </label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-xs" />
<span>Extra Small</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-sm" />
<span>Small</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-md" />
<span>Medium</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-lg" />
<span>Large</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-xl" />
<span>Extra Large</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-xs" />
<span>Extra Small</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-sm" />
<span>Small</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-md" />
<span>Medium</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-lg" />
<span>Large</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-xl" />
<span>Extra Large</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-xs" />
<span>Extra Small</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-sm" />
<span>Small</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-md" />
<span>Medium</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-lg" />
<span>Large</span>
</label>
<label class="$$floating-label">
<input type="text" placeholder="" class="$$input $$input-xl" />
<span>Extra Large</span>
</label>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
