Form

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/Form.tsx
'use client';
import {
  Form as RACForm,
  FormProps,
  LabelProps,
  Label as RACLabel,
  FieldErrorProps,
  FieldError as RACFieldError,
  ButtonProps,
  Button,
  TextProps
} from 'react-aria-components';
import './Form.css';
import { Text } from '@/registry/react-aria/ui/Content';

export function Form(props: FormProps) {
  return <RACForm {...props} />;
}

export function Label(props: LabelProps) {
  return <RACLabel {...props} />;
}

export function FieldError(props: FieldErrorProps) {
  return <RACFieldError {...props} />;
}

export function Description(props: TextProps) {
  return <Text slot="description" className="field-description" {...props} />
}

export function FieldButton(props: ButtonProps) {
  return <Button {...props} className="field-Button" />;
}

Installation

npx shadcn@latest add @react-aria/css-form

Usage

import { CssForm } from "@/components/ui/css-form"
<CssForm />