Park UI

Usage

I'm a label

import { FormLabel, type FormLabelProps } from '~/components/ui/form-label'

export const Demo = (props: FormLabelProps) => {
  return <FormLabel {...props}>I'm a label</FormLabel>
}

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 FormLabelProps extends FormLabelVariantProps, HTMLArkProps<'label'> {}

export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>((props, ref) => {
  const { size, className, ...rest } = props
  return <ark.label className={styles({ size, className })} ref={ref} {...rest} />
})

FormLabel.displayName = 'FormLabel'

type FormLabelVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'formLabel',
    defaultVariants: { size: 'md' },
    variants: {
      size: {
        sm: 'formLabel--size_sm',
        md: 'formLabel--size_md',
        lg: 'formLabel--size_lg',
        xl: 'formLabel--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 FormLabelProps extends FormLabelVariantProps, HTMLArkProps<'label'> {}

export const FormLabel = (props: FormLabelProps) => {
  const [variantProps, formLabelProps] = splitProps(props, ['class', 'size'])
  return <ark.label class={styles(variantProps)} {...formLabelProps} />
}

type FormLabelVariantProps = VariantProps<typeof styles>

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

Not yet available

Form Label

Usage

Installation