Textarea

Displays a form textarea or a component that looks like a textarea.

import { Textarea } from '#app/ui/textarea.tsx'

export function TextareaDemo() {
  return () => <Textarea placeholder="Type your message here." />
}

import { Textarea } from '#app/ui/textarea.tsx'

export function TextareaDemo() {
  return () => <Textarea placeholder="Type your message here." />
}

Installation

$ pnpm dlx shadcn@latest add https://www.shadcn-remix.com/r/textarea.json

Install the following dependencies:

$ pnpm add remix

Copy and paste the following code into your project.

app/ui/textarea.tsx

import { css, type Handle, type Props } from 'remix/component'

export interface TextareaProps extends Props<'textarea'> {}

const textareaStyles = css({
  display: 'flex',
  fieldSizing: 'content',
  minHeight: '4rem',
  width: '100%',
  borderRadius: 'calc(var(--radius) - 2px)',
  borderWidth: '1px',
  borderColor: 'var(--input)',
  backgroundColor: 'transparent',
  paddingInline: '0.75rem',
  paddingBlock: '0.5rem',
  fontSize: '1rem',
  lineHeight: 1.5,
  '--tw-shadow': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  boxShadow: 'var(--tw-ring-shadow), var(--tw-shadow)',
  transitionProperty: 'color, box-shadow',
  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  transitionDuration: '150ms',
  outlineStyle: 'none',
  '&::placeholder': { color: 'var(--muted-foreground)' },
  '&:focus-visible': {
    borderColor: 'var(--ring)',
    '--tw-ring-shadow':
      '0 0 0 3px var(--tw-ring-color, color-mix(in oklab, var(--ring) 50%, transparent))',
  },
  '&:disabled': { cursor: 'not-allowed', opacity: 0.5 },
  '&[aria-invalid="true"]': {
    borderColor: 'var(--destructive)',
    '--tw-ring-color': 'color-mix(in oklab, var(--destructive) 20%, transparent)',
  },
  '@media (min-width: 48rem)': { fontSize: '0.875rem', lineHeight: 'calc(1.25 / 0.875)' },
  '.dark &': { backgroundColor: 'color-mix(in oklab, var(--input) 30%, transparent)' },
  '.dark &[aria-invalid="true"]': {
    '--tw-ring-color': 'color-mix(in oklab, var(--destructive) 40%, transparent)',
  },
})

export function Textarea(handle: Handle<TextareaProps>) {
  return () => {
    let { mix, ...props } = handle.props

    return <textarea data-slot="textarea" {...props} mix={[textareaStyles, mix]} />
  }
}

Update the import paths to match your project setup.

Usage

import { Textarea } from '#app/ui/textarea.tsx'

<Textarea />

Examples

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

import { Textarea } from '#app/ui/textarea.tsx'

export function TextareaDisabled() {
  return () => <Textarea placeholder="Type your message here." disabled />
}

import { Textarea } from '#app/ui/textarea.tsx'

export function TextareaDisabled() {
  return () => <Textarea placeholder="Type your message here." disabled />
}

With button

import { css } from 'remix/component'

import { Button } from '#app/ui/button.tsx'
import { Textarea } from '#app/ui/textarea.tsx'

const gridStyles = css({ display: 'grid', width: '100%', gap: '0.5rem' })

import { css } from 'remix/component'

import { Button } from '#app/ui/button.tsx'
import { Textarea } from '#app/ui/textarea.tsx'

const gridStyles = css({ display: 'grid', width: '100%', gap: '0.5rem' })

export function TextareaWithButton() {
  return () => (
    <div mix={gridStyles}>
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}

With label

Your message

import { css } from 'remix/component'

import { Label } from '#app/ui/label.tsx'
import { Textarea } from '#app/ui/textarea.tsx'

const gridStyles = css({ display: 'grid', width: '100%', gap: '0.75rem' })

import { css } from 'remix/component'

import { Label } from '#app/ui/label.tsx'
import { Textarea } from '#app/ui/textarea.tsx'

const gridStyles = css({ display: 'grid', width: '100%', gap: '0.75rem' })

export function TextareaWithLabel() {
  return () => (
    <div mix={gridStyles}>
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}

With text

Your Message

Your message will be copied to the support team.

import { css } from 'remix/component'

import { Label } from '#app/ui/label.tsx'
import { Textarea } from '#app/ui/textarea.tsx'

const gridStyles = css({ display: 'grid', width: '100%', gap: '0.75rem' })

import { css } from 'remix/component'

import { Label } from '#app/ui/label.tsx'
import { Textarea } from '#app/ui/textarea.tsx'

const gridStyles = css({ display: 'grid', width: '100%', gap: '0.75rem' })
const mutedStyles = css({
  fontSize: '0.875rem',
  lineHeight: 'calc(1.25 / 0.875)',
  color: 'var(--muted-foreground)',
})

export function TextareaWithText() {
  return () => (
    <div mix={gridStyles}>
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p mix={mutedStyles}>Your message will be copied to the support team.</p>
    </div>
  )
}

API Reference

Textarea

Prop	Type	Default
`mix`	`MixValue`	-

Tabs Toggle

On This Page

Installation Usage Examples Disabled With button With label With text API Reference Textarea

Edit this page Follow @shadcnlabs Join community