Form Label

A text component that provides information about another component.

Usage

I'm a label

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

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

Installation

npx @park-ui/cli components add form-label

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/form-label.tsx

import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { formLabel } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'

export type FormLabelProps = ComponentProps<typeof FormLabel>
export const FormLabel = styled(ark.label, formLabel)

import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { formLabel } from 'styled-system/recipes'

export type FormLabelProps = ComponentProps<typeof FormLabel>
export const FormLabel = styled(ark.label, formLabel)

No snippet found

Extend ~/components/ui/primitives/index.ts with the following line:

export { FormLabel, type FormLabelProps } from './form-label'

2

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts: