Textarea

Tailwind CSS and Alpine JS Textarea

Text areas allow users to enter multiple lines of text into a form field. They can be used to collect information such as comments, reviews, and more.

Default textarea

A text area with a label and placeholder.

HTML 
<div class="">
    <label for="textArea" class="">Comment</label>
    <textarea id="textArea" class="" rows="3" placeholder="We'd love to hear from you..."></textarea>
</div>

Textarea states

Examples of text areas in error and success states.

Error: Please add some comments to your evaluation
HTML 
<!-- Textarea with error -->
<div class="">
    <label for="textareaError" class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
            <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
        </svg>
        Comment
    </label>
    <textarea id="textareaError" class="" name="comment" rows="3"></textarea>
    <small class="">Error: Please add some comments to your evaluation</small>
</div>

<!-- Textarea with success -->
<div class="">
    <label for="textareaSuccess" class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
            <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
        </svg>
        Comment
    </label>
    <textarea id="textareaSuccess" class="" name="comment" rows="3"></textarea>
</div>

Textarea with actions

A text area with a label, placeholder, and action buttons. You can use this component for chatbots, comments, reviews, and more.

HTML 
<div class="">
	<div class="">
		<textarea class="" name="message" rows="6" placeholder="Type your message here..."></textarea>
	</div>
	<!-- Footer Container -->
	<div class="">
		<!-- Action Buttons -->
		<div class="">
			<!-- Emoji Button -->
			<button class="" title="Emojies" aria-label="Emojies">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
					<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z" clip-rule="evenodd" />
				</svg>
			</button>
			<!-- Attach Button -->
			<button class="" title="attach a file" aria-label="attach a file">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
					<path fill-rule="evenodd" d="M18.97 3.659a2.25 2.25 0 0 0-3.182 0l-10.94 10.94a3.75 3.75 0 1 0 5.304 5.303l7.693-7.693a.75.75 0 0 1 1.06 1.06l-7.693 7.693a5.25 5.25 0 1 1-7.424-7.424l10.939-10.94a3.75 3.75 0 1 1 5.303 5.304L9.097 18.835l-.008.008-.007.007-.002.002-.003.002A2.25 2.25 0 0 1 5.91 15.66l7.81-7.81a.75.75 0 0 1 1.061 1.06l-7.81 7.81a.75.75 0 0 0 1.054 1.068L18.97 6.84a2.25 2.25 0 0 0 0-3.182Z" clip-rule="evenodd" />
				</svg>
			</button>
			<!-- Voice Button -->
			<button class="" title="send voice" aria-label="send voice">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
					<path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
					<path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291a6.751 6.751 0 0 1-6-6.709v-1.5A.75.75 0 0 1 6 10.5Z" />
				</svg>
			</button>
		</div>
		<!-- Send Button -->
		<button class="" type="button" aria-label="send">Send</button>
	</div>
</div>

Keyboard Navigation

Key Action
Tab Next item gets the focus
Space Textarea with actions:<br> Action button gets selected