forms
Tailwind CSS Textarea
A textarea is a multi-line input field that enables users to enter longer blocks of text, such as comments, messages, or descriptions.
Basic textarea example.
<textarea class="textarea max-w-sm" aria-label="Textarea" ></textarea>Basic textarea with placeholder.
<div class="sm:w-96"> <label class="label-text" for="textareaLabel"> Your bio </label> <textarea class="textarea" placeholder="Hello!!!" id="textareaLabel"></textarea> </div><textarea class="textarea max-w-sm" placeholder="Hello!!!" ></textarea>The textarea-floating style is used to define the appearance of the textarea, while the textarea-floating-label is the container for the label text.
<div class="textarea-floating sm:w-96"> <textarea class="textarea" placeholder="Hello!!!" id="textareaFloating"></textarea> <label class="textarea-floating-label" for="textareaFloating">Your bio</label> </div>Add responsive class textarea-{size} where {size} = xs|sm|md|lg|xl for textarea of different sizes.
<textarea class="textarea textarea-xs max-w-sm" placeholder="Hello!!!" ></textarea> <textarea class="textarea textarea-sm max-w-sm" placeholder="Hello!!!" ></textarea> <textarea class="textarea max-w-sm" placeholder="Hello!!!" ></textarea> <textarea class="textarea textarea-lg max-w-sm" placeholder="Hello!!!" ></textarea> <textarea class="textarea textarea-xl max-w-sm" placeholder="Hello!!!" ></textarea>Add responsive class select-{size} where {size} = xs|sm|md|lg|xl for select of different sizes.
<div class="textarea-floating sm:w-96"> <textarea class="textarea textarea-xs" placeholder="Hello!!!" id="textareaFloatingExtraSmall"></textarea> <label class="textarea-floating-label" for="textareaFloatingExtraSmall">Your bio</label> </div> <div class="textarea-floating sm:w-96"> <textarea class="textarea textarea-sm" placeholder="Hello!!!" id="textareaFloatingSmall"></textarea> <label class="textarea-floating-label" for="textareaFloatingSmall">Your bio</label> </div> <div class="textarea-floating sm:w-96"> <textarea class="textarea" placeholder="Hello!!!" id="textareaFloatingMedium"></textarea> <label class="textarea-floating-label" for="textareaFloatingMedium">Your bio</label> </div> <div class="textarea-floating sm:w-96"> <textarea class="textarea textarea-lg" placeholder="Hello!!!" id="textareaFloatingLarge"></textarea> <label class="textarea-floating-label" for="textareaFloatingLarge">Your bio</label> </div> <div class="textarea-floating sm:w-96"> <textarea class="textarea textarea-xl" placeholder="Hello!!!" id="textareaFloatingExtraLarge"></textarea> <label class="textarea-floating-label" for="textareaFloatingExtraLarge">Your bio</label> </div>Add a leading icon inside textarea.
<div class="textarea max-w-sm"> <span class="icon-[tabler--message] text-base-content/80 mt-2 mx-4 size-5 shrink-0"></span> <textarea class="grow" placeholder="Hello!!!"></textarea> </div> <div class="textarea max-w-sm"> <span class="icon-[tabler--message] text-base-content/80 mt-2 mx-4 size-5 shrink-0"></span> <div class="textarea-floating grow"> <textarea placeholder="Hello!!!" id="textareaFloatingMedium"></textarea> <label class="textarea-floating-label" for="textareaFloatingMedium">Your bio</label> </div> </div>Add a tailing icon inside textarea.
<div class="textarea max-w-sm"> <textarea class="grow resize-none" placeholder="Hello!!!"></textarea> <span class="icon-[tabler--message] text-base-content/80 mt-2 mx-4 size-5 shrink-0"></span> </div> <div class="textarea max-w-sm"> <div class="textarea-floating grow"> <textarea class="resize-none" placeholder="Hello!!!" id="textareaFloatingMedium"></textarea> <label class="textarea-floating-label" for="textareaFloatingMedium">Your bio</label> </div> <span class="icon-[tabler--message] text-base-content/80 mt-2 mx-4 size-5 shrink-0"></span> </div>Success state can be show using is-valid class.
Helper text
Helper text
<!-- Basic --> <div class="sm:w-96"> <label class="label-text" for="textareaStateSuccessDefault"> Full Name </label> <textarea class="textarea is-valid" placeholder="Hello!!!" id="textareaStateSuccessDefault"></textarea> <span class="helper-text">Helper text</span> </div> <!-- Floating --> <div class="textarea-floating sm:w-96"> <textarea class="textarea is-valid" placeholder="Hello!!!" id="textareaStateSuccessFloating"></textarea> <label class="textarea-floating-label" for="textareaStateSuccessFloating">Your bio</label> <span class="helper-text">Helper text</span> </div>Error state can be show using is-invalid class.
Helper text
Helper text
<!-- Basic --> <div class="sm:w-96"> <label class="label-text" for="textareaStateErrorDefault"> Full Name </label> <textarea class="textarea is-invalid" placeholder="Hello!!!" id="textareaStateErrorDefault"></textarea> <span class="helper-text">Helper text</span> </div> <!-- Floating --> <div class="textarea-floating sm:w-96"> <textarea class="textarea is-invalid" placeholder="Hello!!!" id="textareaStateErrorFloating"></textarea> <label class="textarea-floating-label" for="textareaStateErrorFloating">Your bio</label> <span class="helper-text">Helper text</span> </div>label elements hidden using the .sr-only class.
<div class="w-full sm:w-96"> <label class="label-text sr-only" for="textareaHiddenLabel"> Your bio </label> <textarea class="textarea" placeholder="Hello!!!" id="textareaHiddenLabel"></textarea> </div>Add the disabled boolean attribute on an textarea to remove pointer events, and prevent focusing.
<div class="w-full sm:w-96"> <label class="label-text sr-only" for="textareaDisabledefault"> Your bio </label> <textarea class="textarea" placeholder="Hello!!!" id="textareaDisabledefault" disabled></textarea> </div> <div class="textarea-floating sm:w-96"> <textarea class="textarea" placeholder="Hello!!!" id="textareaDisabledoating" disabled></textarea> <label class="textarea-floating-label" for="textareaDisabledoating">Your bio</label> </div>Add the readonly boolean attribute on an textarea to prevent modification of the textarea value.
<div class="w-full sm:w-96"> <label class="label-text sr-only" for="textareaReadonly"> Your bio </label> <textarea class="textarea" placeholder="Hello!!!" id="textareaReadonly" readonly></textarea> </div>Basic textarea example with helper text and hints.
Helper text
Helper text
<!-- Basic --> <div class="w-full sm:w-96"> <label class="label-text" for="textareaHelperTextDefault"> Full Name </label> <textarea class="textarea" placeholder="Hello!!!" id="textareaHelperTextDefault"></textarea> <span class="helper-text">Helper text</span> </div> <!-- Floating --> <div class="textarea-floating sm:w-96"> <textarea class="textarea" placeholder="Hello!!!" id="textareaHelperTextFloating"></textarea> <label class="textarea-floating-label" for="textareaHelperTextFloating">Your bio</label> <span class="helper-text">Helper text</span> </div>