Field component
Installation
npx shadcn@latest add @caprice/fieldnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { Field as FieldPrimitive } from '@base-ui/react/field';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups all parts of the field. * Renders a `<div>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field) */export namespace Root { export type State = FieldPrimitive.Root.State; export type Props = React.ComponentProps<typeof FieldPrimitive.Root>;}export function Root({ ...props }: Root.Props) { return <FieldPrimitive.Root data-slot="field" {...props} />;}/** * An accessible label that is automatically associated with the field control. * Renders a `<label>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#label) */export namespace Label { export type Props = React.ComponentProps<typeof FieldPrimitive.Label>; export type State = FieldPrimitive.Label.State;}export function Label({ className, ...props }: Label.Props) { return ( <FieldPrimitive.Label className={cn( 'flex select-none items-center gap-2 font-medium text-sm leading-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50', className )} data-slot="field-label" {...props} /> );}/** * The form control to label and validate. * Renders an `<input>` element. * * You can omit this part and use any Base UI input component instead. For example, * [Input](https://caprice-ui.com/docs/components/input), [Checkbox](https://caprice-ui.com/docs/components/checkbox), * or [Select](https://caprice-ui.com/docs/components/select), among others, will work with Field out of the box. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#control) */export namespace Control { export type Props = React.ComponentProps<typeof FieldPrimitive.Control>; export type State = FieldPrimitive.Control.State; export type ChangeEventDetails = FieldPrimitive.Control.ChangeEventDetails; export type ChangeEventReason = FieldPrimitive.Control.ChangeEventReason;}export function Control({ ...props }: Control.Props) { return <FieldPrimitive.Control data-slot="field-control" {...props} />;}/** * A paragraph with additional information about the field. * Renders a `<p>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#description) */export namespace Description { export type Props = React.ComponentProps<typeof FieldPrimitive.Description>; export type State = FieldPrimitive.Description.State;}export function Description({ ...props }: Description.Props) { return <FieldPrimitive.Description data-slot="field-description" {...props} />;}/** * An error message displayed if the field control fails validation. * Renders a `<div>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#error) */export namespace Error { export type Props = React.ComponentProps<typeof FieldPrimitive.Error>; export type State = FieldPrimitive.Error.State;}// biome-ignore lint/suspicious/noShadowRestrictedNames: false positiveexport function Error({ ...props }: Error.Props) { return <FieldPrimitive.Error data-slot="field-error" {...props} />;}/** * Used to display a custom message based on the field’s validity. * Requires `children` to be a function that accepts field validity state as an argument. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#validity) */export namespace Validity { export type State = FieldPrimitive.Validity.State; export type Props = React.ComponentProps<typeof FieldPrimitive.Validity>;}export function Validity({ ...props }: Validity.Props) { return <FieldPrimitive.Validity data-slot="field-validity" {...props} />;}/** * Groups individual items in a checkbox group or radio group with a label and description. * Renders a `<div>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#item) */export namespace Item { export type State = FieldPrimitive.Item.State; export type Props = React.ComponentProps<typeof FieldPrimitive.Item>;}export function Item({ ...props }: Item.Props) { return <FieldPrimitive.Item data-slot="field-item" {...props} />;}Update the import paths to match your project setup.
Usage
import * as Field from "@/components/caprice-ui/field"import * as Field from "@caprice-ui/react/field"