Textarea Inputs

Textarea Inputs 10 · Write and preview tabs

A box with Write and Preview tabs above a text area, for markdown-style editing.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><div class='max-w-xl overflow-hidden rounded-xl border border-neutral-300'><div class='flex border-b border-neutral-200 bg-neutral-50 text-sm'><span class='border-b-2 border-black bg-white px-4 py-2.5 font-medium text-black'>Write</span><span class='px-4 py-2.5 text-neutral-500'>Preview</span></div><textarea rows='6' placeholder='Leave a comment' class='w-full px-4 py-3 font-mono text-sm outline-none'></textarea></div></div>

Textarea Inputs 09 · Read-only

A grey, non-editable text area showing a saved note with a small lock label.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-lg text-sm font-medium text-neutral-500'>Note <span class='ml-1 rounded bg-neutral-100 px-1.5 py-0.5 text-xs font-normal'>Read only</span><textarea rows='4' readonly class='mt-1.5 w-full cursor-not-allowed rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm text-neutral-500 outline-none'>Approved by the design team on 12 Nov.</textarea></label></div>

Textarea Inputs 08 · Error state

A textarea with a thick black border and an error line underneath explaining what is missing.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-lg text-sm font-medium text-black'>Reason<textarea rows='4' class='mt-1.5 w-full rounded-lg border-2 border-black px-3 py-2.5 text-sm outline-none'></textarea><span class='mt-1.5 flex items-center gap-1.5 text-xs font-medium text-black'><span class='grid h-4 w-4 place-items-center rounded-full bg-black text-[10px] text-white'>!</span>Please write at least a few words.</span></label></div>

Textarea Inputs 07 · With attachments footer

A large box with a text area on top and a footer row holding an attach button and a send button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><div class='max-w-xl overflow-hidden rounded-2xl border border-neutral-300 focus-within:border-black'><textarea rows='5' placeholder='Describe what you need' class='w-full px-4 py-3 text-sm outline-none'></textarea><div class='flex items-center justify-between border-t border-neutral-200 bg-neutral-50 px-3 py-2'><button type='button' class='inline-flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm text-neutral-600 hover:bg-neutral-200'>⎘ Attach</button><button type='button' class='rounded-lg bg-black px-4 py-1.5 text-sm font-semibold text-white'>Send</button></div></div></div>

Textarea Inputs 06 · Chat input

A rounded message box with a one-line text area and a round send button on the right.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-neutral-50 p-10'><div class='flex max-w-xl items-end gap-2 rounded-3xl border border-neutral-300 bg-white p-2 pl-5 focus-within:border-black'><textarea rows='1' placeholder='Message' class='max-h-32 min-w-0 flex-1 resize-none py-2.5 text-sm outline-none'></textarea><button type='button' class='grid h-10 w-10 shrink-0 place-items-center rounded-full bg-black text-white' aria-label='Send'>↑</button></div></div>

Textarea Inputs 05 · Comment box

A comment composer: a round initials avatar, a text area and a Post button on its own row.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><div class='flex max-w-xl gap-3'><span class='grid h-10 w-10 shrink-0 place-items-center rounded-full bg-black text-xs font-semibold text-white'>AM</span><div class='flex-1'><textarea rows='3' placeholder='Add a comment' class='w-full rounded-xl border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><div class='mt-2 flex items-center justify-between'><span class='text-xs text-neutral-400'>Markdown is supported</span><button type='button' class='rounded-lg bg-black px-4 py-1.5 text-sm font-semibold text-white'>Post</button></div></div></div></div>

Textarea Inputs 04 · Dark textarea

A textarea on a black background with a dark field, a white label and a grey placeholder.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-black p-10'><label class='block max-w-lg text-sm font-medium text-white'>Message<textarea rows='5' placeholder='Write to us' class='mt-1.5 w-full rounded-lg border border-neutral-800 bg-neutral-900 px-3 py-2.5 text-sm text-white placeholder-neutral-600 outline-none focus:border-white'></textarea></label></div>

Textarea Inputs 03 · With formatting toolbar

A text area sitting under a small row of formatting buttons inside one bordered box.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><div class='max-w-xl overflow-hidden rounded-xl border border-neutral-300 focus-within:border-black'><div class='flex gap-1 border-b border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm'><button type='button' class='rounded px-2.5 py-1 font-bold text-black hover:bg-neutral-200'>B</button><button type='button' class='rounded px-2.5 py-1 italic text-black hover:bg-neutral-200'>I</button><button type='button' class='rounded px-2.5 py-1 text-black underline hover:bg-neutral-200'>U</button><button type='button' class='rounded px-2.5 py-1 text-black hover:bg-neutral-200'>☰</button></div><textarea rows='6' placeholder='Write something' class='w-full px-3 py-3 text-sm outline-none'></textarea></div></div>

Textarea Inputs 02 · Character counter

A textarea with a live-style counter in the bottom right showing how many characters are used.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><div class='max-w-lg'><label class='block text-sm font-medium text-black' for='bio'>Bio</label><div class='relative mt-1.5'><textarea id='bio' rows='5' class='w-full rounded-lg border border-neutral-300 px-3 py-2.5 pb-8 text-sm outline-none focus:border-black'>Designer who likes clean code.</textarea><span class='absolute bottom-2.5 right-3 text-xs text-neutral-400'>30 / 160</span></div></div></div>

Textarea Inputs 01 · Label and helper

A textarea with a label above and a small helper line below.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><label class='block max-w-lg text-sm font-medium text-black'>Description<textarea rows='5' class='mt-1.5 w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm outline-none focus:border-black'></textarea><span class='mt-1.5 block text-xs font-normal text-neutral-500'>A short sentence about what this page is for.</span></label></div>