About this snippet

This textarea grows automatically as you type, so scrollbars never hide your text. It improves the user experience on forms and comment sections, and we used just a few lines of JavaScript to make it work.

Size
997 bytes
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
510
<div class="textarea-container">
  <label for="message">Your Message</label>
  <textarea id="message" placeholder="Type something long here..." rows="1"></textarea>
</div>
.textarea-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 500px;
  margin: 0 auto;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
}
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s;
  min-height: 50px;
}
textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
const textarea = document.getElementById("message");

textarea.addEventListener("input", function() {
  this.style.height = "auto";
  this.style.height = `${this.scrollHeight}px`;
});
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save