Back to Components

NotesEditor Component

Basic NotesEditor

With Placeholder

Pre-filled Content

Auto-Sizing Demo

Try this: Copy and paste some long text, or type multiple lines to see how the component automatically adjusts its height.

Use Cases

Comment System

Note Taking

Auto-saved Last edited: just now

Feedback Form

Task Description

Features

Key Features:

  • • Auto-Sizing: Automatically adjusts height based on content
  • • Multi-line Support: Handles text with line breaks properly
  • • Placeholder Text: Shows helpful placeholder when empty
  • • Reactive Binding: Two-way data binding with Svelte's $state
  • • Consistent Styling: Matches the design system used by other inputs
  • • Accessible: Proper semantic HTML with textarea element
  • • Responsive: Works well on all screen sizes

Styling

CSS Classes Applied:

w-full px-3 py-2 border border-input-border rounded-md 
focus:outline-none focus:ring-2 focus:ring-blue-500 
focus:border-transparent resize-none

The component uses Tailwind CSS classes for consistent styling and automatically disables manual resizing since it handles sizing automatically.