Fieldset component
Installation
npx shadcn@latest add @caprice/fieldsetnpm 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 { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups the fieldset legend and the associated fields. * Renders a `<fieldset>` element. * * Documentation: [Caprice UI Fieldset](https://caprice-ui.com/docs/components/fieldset) * * API Reference: [Base UI Fieldset](https://base-ui.com/react/components/fieldset#root) */export namespace Root { export type Props = React.ComponentProps<typeof FieldsetPrimitive.Root>; export type State = FieldsetPrimitive.Root.State;}export function Root({ className, ...props }: Root.Props) { return ( <FieldsetPrimitive.Root className={cn( 'flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className )} data-slot="fieldset" {...props} /> );}/** * An accessible label that is automatically associated with the fieldset. * Renders a `<div>` element. * * Documentation: [Caprice UI Fieldset](https://caprice-ui.com/docs/components/fieldset) * * API Reference: [Base UI Fieldset](https://base-ui.com/react/components/fieldset#legend) */export namespace Legend { export type State = FieldsetPrimitive.Legend.State; export type Props = React.ComponentProps<typeof FieldsetPrimitive.Legend>;}export function Legend({ className, ...props }: Legend.Props) { return ( <FieldsetPrimitive.Legend className={cn('font-medium text-base', className)} data-slot="fieldset-legend" {...props} /> );}Update the import paths to match your project setup.
Usage
import * as Fieldset from "@/components/caprice-ui/fieldset"import * as Fieldset from "@caprice-ui/react/fieldset"