Park UI

Usage

Description

size: md

import { Stack } from 'styled-system/jsx'
import { FormLabel } from '~/components/ui/form-label'
import { Textarea, type TextareaProps } from '~/components/ui/textarea'

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

Insert code snippet into your project. Update import paths as needed.

import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
import { forwardRef } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'

export interface TextareaProps extends TextareaVariantProps, HTMLArkProps<'textarea'> {}

export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
  const { size, className, ...rest } = props
  return <ark.textarea className={styles({ size, className })} ref={ref} {...rest} />
})

Textarea.displayName = 'Textarea'

type TextareaVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'textarea',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        sm: 'textarea--size_sm',
        md: 'textarea--size_md',
        lg: 'textarea--size_lg',
        xl: 'textarea--size_xl',
      },
    },
  },
  { twMerge: false },
)

import { type HTMLArkProps, ark } from '@ark-ui/solid'
import { splitProps } from 'solid-js'
import { type VariantProps, tv } from 'tailwind-variants'

export interface TextareaProps extends TextareaVariantProps, HTMLArkProps<'textarea'> {}

export const Textarea = (props: TextareaProps) => {
  const [variantProps, textareaProps] = splitProps(props, ['class', 'size'])
  return <ark.textarea class={styles(variantProps)} {...textareaProps} />
}

type TextareaVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'textarea',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        sm: 'textarea--size_sm',
        md: 'textarea--size_md',
        lg: 'textarea--size_lg',
        xl: 'textarea--size_xl',
      },
    },
  },
  { twMerge: false },
)

Not yet available