Textarea
A multiline input field often used for comments or messages.
Usage
import { Stack } from 'styled-system/jsx'
import { FormLabel, Textarea, type TextareaProps } from '~/components/ui'
export const Demo = (props: TextareaProps) => {
return (
<Stack gap="1.5" width="2xs">
<FormLabel htmlFor="description">Description</FormLabel>
<Textarea id="description" rows={4} {...props} />
</Stack>
)
}
Installation
npx @park-ui/cli components add textarea1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/textarea.tsx
import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { textarea } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type TextareaProps = ComponentProps<typeof Textarea>
export const Textarea = styled(ark.textarea, textarea)
import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { textarea } from 'styled-system/recipes'
export type TextareaProps = ComponentProps<typeof Textarea>
export const Textarea = styled(ark.textarea, textarea)
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export { Textarea, type TextareaProps } from './textarea'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { defineRecipe } from '@pandacss/dev'
export const textarea = defineRecipe({
className: 'textarea',
base: {
appearance: 'none',
background: 'none',
borderColor: 'border.default',
borderRadius: 'l2',
borderWidth: '1px',
colorPalette: 'accent',
minWidth: 0,
outline: 0,
position: 'relative',
transitionDuration: 'normal',
transitionProperty: 'border-color, box-shadow',
width: 'full',
_disabled: {
opacity: 0.4,
cursor: 'not-allowed',
},
_focus: {
borderColor: 'colorPalette.default',
boxShadow: '0 0 0 1px var(--colors-color-palette-default)',
},
},
defaultVariants: {
size: 'md',
},
variants: {
size: {
sm: { p: '2.5', fontSize: 'sm' },
md: { p: '3', fontSize: 'md' },
lg: { p: '3.5', fontSize: 'md' },
xl: { p: '4', fontSize: 'md' },
},
},
})