Components
A textarea is an element on a webpage that you can type into.
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!
Basic input example with placeholder.
<textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="This is a textarea placeholder"></textarea>
Basic input example with label.
<label for="textarea-label" class="block text-sm font-medium mb-2 dark:text-white">Comment</label>
<textarea id="textarea-label" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi..."></textarea>
<label> elements hidden using the .sr-only class
<label for="textarea-email-label" class="sr-only">Comment</label>
<textarea id="textarea-email-label" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi..."></textarea>
Basic input example.
<textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3"></textarea>
Gray textarea variant.
<textarea class="py-3 px-4 block w-full bg-gray-100 border-transparent rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-transparent dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="This is a textarea placeholder"></textarea>
Underline textarea variant.
<textarea class="py-3 px-0 block w-full bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm focus:border-blue-500 focus:border-t-transparent focus:border-x-transparent focus:border-b-blue-500 focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600" rows="3" placeholder="This is a textarea placeholder"></textarea>
A placeholder is required on each <input> as our method uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).
<!-- Floating Textarea -->
<div class="relative">
<textarea id="hs-floating-textarea" class="peer p-4 block w-full border-gray-200 rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="This is a textarea placeholder"></textarea>
<label for="hs-floating-textarea" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500">Comment</label>
</div>
<!-- End Floating Textarea -->
<!-- Gray Floating Textarea -->
<div class="relative">
<textarea id="hs-floating-textarea-gray" class="peer p-4 block w-full bg-gray-100 border-transparent rounded-lg text-sm placeholder:text-transparent focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-transparent dark:text-gray-400 dark:focus:ring-gray-600
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="This is a textarea placeholder"></textarea>
<label for="hs-floating-textarea-gray" class="absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500">Comment</label>
</div>
<!-- End Gray Floating Textarea -->
<!-- Underline Floating Textarea -->
<div class="relative">
<textarea id="hs-floating-textarea-underline" class="peer py-4 px-0 block w-full bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-gray-200 text-sm placeholder:text-transparent focus:border-blue-500 focus:border-t-transparent focus:border-x-transparent focus:border-b-blue-500 focus:ring-0 disabled:opacity-50 disabled:pointer-events-none dark:border-b-gray-700 dark:text-gray-400 dark:focus:ring-gray-600 dark:focus:border-b-gray-600
focus:pt-6
focus:pb-2
[&:not(:placeholder-shown)]:pt-6
[&:not(:placeholder-shown)]:pb-2
autofill:pt-6
autofill:pb-2" placeholder="This is a textarea placeholder"></textarea>
<label for="hs-floating-textarea-underline" class="absolute top-0 start-0 py-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-white peer-disabled:opacity-50 peer-disabled:pointer-events-none
peer-focus:text-xs
peer-focus:-translate-y-1.5
peer-focus:text-gray-500
peer-[:not(:placeholder-shown)]:text-xs
peer-[:not(:placeholder-shown)]:-translate-y-1.5
peer-[:not(:placeholder-shown)]:text-gray-500">Comment</label>
</div>
<!-- End Underline Floating Textarea -->
<script>
(function() {
window.addEventListener('load', () => {
// Textarea auto height
const textareas = [
'#hs-floating-textarea',
'#hs-floating-textarea-gray',
'#hs-floating-textarea-underline'
]
textareas.forEach((el) => {
const textarea = document.querySelector(el);
textareaAutoHeight(textarea, 3);
textarea.addEventListener('input', () => {
textareaAutoHeight(textarea, 3);
});
});
function textareaAutoHeight(el, offsetTop = 0) {
el.style.height = 'auto';
el.style.height = `${el.scrollHeight + offsetTop}px`;
}
})
})()
</script>
Inputs stacked small to large sizes.
<textarea class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="2" placeholder="Small size"></textarea>
<textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="2" placeholder="Default size"></textarea>
<textarea class="sm:p-5 py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="2" placeholder="Large size"></textarea>
Add the readonly boolean attribute on an input to prevent modification of the input’s value.
<textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Readonly" readonly></textarea>
Add the disabled boolean attribute on an input to remove pointer events, and prevent focusing.
<textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Disabled textarea" disabled></textarea>
<textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Disabled readonly textarea" disabled readonly></textarea>
Basic input example with helper text.
We'll get back to you soon.
<label for="textarea-label-with-helper-text" class="block text-sm font-medium mb-2 dark:text-white">Leave your question</label>
<textarea id="textarea-label-with-helper-text" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi, we'll be happy to chat with you." aria-describedby="hs-textarea-helper-text"></textarea>
<p class="text-xs text-gray-500 mt-2" id="hs-textarea-helper-text">We'll get back to you soon.</p>
Basic input example with corner-hint.
<div class="flex justify-between items-center">
<label for="hs-textarea-with-corner-hint" class="block text-sm font-medium mb-2 dark:text-white">Contact us</label>
<span class="block text-sm text-gray-500 mb-2">100 characters</span>
</div>
<textarea id="hs-textarea-with-corner-hint" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi..."></textarea>
Autoheight example.
<div class="flex justify-between items-center">
<label for="hs-autoheight-textarea" class="block text-sm font-medium mb-2 dark:text-white">Contact us</label>
<span class="block text-sm text-gray-500 mb-2">100 characters</span>
</div>
<textarea id="hs-autoheight-textarea" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi..."></textarea>
<script>
(function() {
window.addEventListener('load', () => {
// Textarea auto height
const textareas = [
'#hs-autoheight-textarea',
]
textareas.forEach((el) => {
const textarea = document.querySelector(el);
textareaAutoHeight(textarea, 3);
textarea.addEventListener('input', () => {
textareaAutoHeight(textarea, 3);
});
});
function textareaAutoHeight(el, offsetTop = 0) {
el.style.height = 'auto';
el.style.height = `${el.scrollHeight + offsetTop}px`;
}
})
})()
</script>
Advanced custom examples.
<!-- Textarea -->
<div class="relative">
<textarea id="hs-textarea-ex-1" class="p-4 pb-12 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" placeholder="Ask me anything..."></textarea>
<!-- Toolbar -->
<div class="absolute bottom-px inset-x-px p-2 rounded-b-md bg-white dark:bg-slate-900">
<div class="flex justify-between items-center">
<!-- Button Group -->
<div class="flex items-center">
<!-- Mic Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-gray-500 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><line x1="9" x2="15" y1="15" y2="9"></line></svg>
</button>
<!-- End Mic Button -->
<!-- Attach Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-gray-500 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
</button>
<!-- End Attach Button -->
</div>
<!-- End Button Group -->
<!-- Button Group -->
<div class="flex items-center gap-x-1">
<!-- Mic Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-gray-500 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
</button>
<!-- End Mic Button -->
<!-- Send Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-white bg-blue-600 hover:bg-blue-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"></path>
</svg>
</button>
<!-- End Send Button -->
</div>
<!-- End Button Group -->
</div>
</div>
<!-- End Toolbar -->
</div>
<!-- End Textarea -->
<script>
(function() {
window.addEventListener('load', () => {
// Textarea auto height
const textareas = [
'#hs-textarea-ex-1',
]
textareas.forEach((el) => {
const textarea = document.querySelector(el);
textareaAutoHeight(textarea, 3);
textarea.addEventListener('input', () => {
textareaAutoHeight(textarea, 3);
});
});
function textareaAutoHeight(el, offsetTop = 0) {
el.style.height = 'auto';
el.style.height = `${el.scrollHeight + offsetTop}px`;
}
})
})()
</script>
Gray style example.
<!-- Textarea -->
<div class="relative">
<textarea id="hs-textarea-ex-2" class="p-4 pb-12 block w-full bg-gray-100 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" placeholder="Ask me anything..."></textarea>
<!-- Toolbar -->
<div class="absolute bottom-px inset-x-px p-2 rounded-b-md bg-gray-100 dark:bg-slate-800">
<div class="flex justify-between items-center">
<!-- Button Group -->
<div class="flex items-center">
<!-- Mic Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-gray-500 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><line x1="9" x2="15" y1="15" y2="9"></line></svg>
</button>
<!-- End Mic Button -->
<!-- Attach Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-gray-500 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
</button>
<!-- End Attach Button -->
</div>
<!-- End Button Group -->
<!-- Button Group -->
<div class="flex items-center gap-x-1">
<!-- Mic Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-gray-500 hover:text-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
</button>
<!-- End Mic Button -->
<!-- Send Button -->
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-lg text-white bg-blue-600 hover:bg-blue-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"></path>
</svg>
</button>
<!-- End Send Button -->
</div>
<!-- End Button Group -->
</div>
</div>
<!-- End Toolbar -->
</div>
<!-- End Textarea -->
<script>
(function() {
window.addEventListener('load', () => {
// Textarea auto height
const textareas = [
'#hs-textarea-ex-2',
]
textareas.forEach((el) => {
const textarea = document.querySelector(el);
textareaAutoHeight(textarea, 3);
textarea.addEventListener('input', () => {
textareaAutoHeight(textarea, 3);
});
});
function textareaAutoHeight(el, offsetTop = 0) {
el.style.height = 'auto';
el.style.height = `${el.scrollHeight + offsetTop}px`;
}
})
})()
</script>
It provides valuable, actionable feedback to your users with HTML5 form validation.
Your message should be at least 10 characters long.
Looks good!
<div>
<label for="hs-validation-name-error" class="block text-sm font-medium mb-2 dark:text-white">Comment</label>
<div class="relative">
<textarea id="hs-validation-name-error" class="py-3 px-4 block w-full border-red-500 rounded-lg text-sm focus:border-red-500 focus:ring-red-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi..." aria-describedby="hs-validation-name-error-helper" required></textarea>
<div class="absolute top-0 end-0 flex items-center pointer-events-none p-3">
<svg class="flex-shrink-0 h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
</div>
</div>
<p class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">Your message should be at least 10 characters long.</p>
</div>
<div>
<label for="hs-validation-name-success" class="block text-sm font-medium mb-2 dark:text-white">Comment</label>
<div class="relative">
<textarea id="hs-validation-name-success" class="py-3 px-4 block w-full border-teal-500 rounded-lg text-sm focus:border-teal-500 focus:ring-teal-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" rows="3" placeholder="Say hi..." aria-describedby="hs-validation-name-success-helper" required></textarea>
<div class="absolute top-0 end-0 flex items-center pointer-events-none p-3">
<svg class="flex-shrink-0 h-4 w-4 text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</div>
</div>
<p class="text-sm text-teal-600 mt-2" id="hs-validation-name-success-helper">Looks good!</p>
</div>