Textarea | Park UI

Installation

npx @park-ui/cli@next add textarea

Add Component

Copy the code snippet below into you components folder.

import { Field } from '@ark-ui/react/field'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { textarea } from 'styled-system/recipes'

export type TextareaProps = ComponentProps<typeof Textarea>
export const Textarea = styled(Field.Textarea, textarea)

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineRecipe } from '@pandacss/dev'

export const textarea = defineRecipe({
  className: 'textarea',
  jsx: ['Textarea', 'Field.Textarea'],
  base: {
    '--error-color': 'colors.fg.error',
    '--focus-color': 'colors.colorPalette.solid',
    appearance: 'none',
    borderRadius: 'l2',
    minWidth: '0',
    outline: '0',
    position: 'relative',
    textAlign: 'start',
    transitionDuration: 'normal',
    transitionProperty: 'box-shadow, border-color',
    transitionTimingFunction: 'default',
    width: '100%',
    _disabled: {
      layerStyle: 'disabled',
    },
  },
  defaultVariants: {
    size: 'md',
    variant: 'outline',
  },
  variants: {
    variant: {
      outline: {
        bg: 'transparent',
        borderWidth: '1px',
        borderColor: 'gray.a7',
        color: 'gray.12',
        focusVisibleRing: 'inside',
        focusRingColor: 'var(--focus-color)',
        _invalid: {
          focusRingColor: 'var(--error-color)',
          borderColor: 'var(--error-color)',
        },
      },
      subtle: {
        borderWidth: '1px',
        borderColor: 'transparent',
        background: 'gray.a3',
        color: 'gray.fg',
        focusVisibleRing: 'inside',
        focusRingColor: 'var(--focus-color)',
        _invalid: {
          focusRingColor: 'var(--error-color)',
        },
      },
      flushed: {
        bg: 'transparent',
        borderBottomWidth: '1px',
        borderBottomColor: 'gray.a7',
        borderRadius: '0',
        color: 'gray.12',
        px: '0',
        _invalid: {
          borderColor: 'var(--error-color)',
          boxShadow: '0px 1px 0px 0px var(--error-color)',
        },
        _focusVisible: {
          borderColor: 'var(--focus-color)',
          boxShadow: '0px 1px 0px 0px var(--focus-color)',
          _invalid: {
            borderColor: 'var(--error-color)',
            boxShadow: '0px 1px 0px 0px var(--error-color)',
          },
        },
      },
    },
    size: {
      sm: { p: '2.5', fontSize: 'sm', scrollPaddingBottom: '2.5' },
      md: { p: '3', fontSize: 'md', scrollPaddingBottom: '3' },
      lg: { p: '3.5', fontSize: 'md', scrollPaddingBottom: '3.5' },
      xl: { p: '4', fontSize: 'md', scrollPaddingBottom: '4' },
    },
  },
})

Usage

import { Textarea } from '@/components/ui'

<Textarea placeholder="Enter your message" />

Examples

Variants

Use the variant prop to change the visual style of the textarea.

Sizes

Use the size prop to change the size of the textarea.

Resize

Use the resize prop to control the resize behavior of the textarea.

To limit the maximum height (or rows) of the textarea, we recommend using the maxHeight prop and setting the value to a lh unit.

<Textarea maxH="5lh" />

Autoresize

Use the autoresize prop to make the textarea autoresize vertically as you type.

Field

Compose the textarea with the Field component to add a label, helper text, and error message.

CommentA short comment about your experience with our product.

Required

Pass the required prop to Field.Root and use the Field.RequiredIndicator to indicate that the textarea is required.

Comment

Invalid

Pass the invalid prop to the Field.Root and use the Field.ErrorText to indicate that the textarea is invalid.

CommentThere was an error with your submission

Ref

Here's how to access the underlying element reference

'use client'
import { useRef } from 'react'
import { Textarea } from '@/components/ui'

export const App = () => {
  const ref = useRef<HTMLTextAreaElement>(null)
  return <Textarea ref={ref} />
}

Props

Prop	Default	Type
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'flushed'`
`size`	`'md'`	`'sm' \| 'md' \| 'lg' \| 'xl'`