>(
- ({ className, ...props }, ref) => (
-
+const CustomErrorMessage = (props: React.ComponentPropsWithoutRef) => {
+ const { className, ...rest } = props;
+ return (
+
⚠️ {props.children}
- ),
-);
+ );
+};
CustomErrorMessage.displayName = 'CustomErrorMessage';
// Example with custom checkbox components
@@ -237,228 +219,147 @@ type Story = StoryObj;
export const CustomCheckboxComponentExamples: Story = {
name: 'Custom Checkbox Component Examples',
decorators: [
- withRemixStubDecorator({
- root: {
- Component: AllCustomComponentsExample,
- action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
- },
+ withReactRouterStubDecorator({
+ routes: [
+ {
+ path: '/',
+ Component: AllCustomComponentsExample,
+ action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+ },
+ ],
}),
],
parameters: {
docs: {
description: {
story: `
-### Checkbox Component Customization
-
-This example demonstrates three different approaches to customizing the Checkbox component with complete control over styling and behavior.
-
-#### 1. Custom Checkbox Appearance
+### Checkbox Customization Examples
-The first approach customizes the visual appearance of the checkbox itself:
+This story demonstrates three different approaches to customizing the Checkbox component:
-\`\`\`tsx
-
-\`\`\`
+#### Custom Checkbox Components Example
-Where the custom components are defined as:
+The first example customizes the actual checkbox and its indicator component:
\`\`\`tsx
-// Custom checkbox component
-const PurpleCheckbox = React.forwardRef<
- HTMLButtonElement,
- React.ComponentPropsWithoutRef
->((props, ref) => (
+const PurpleCheckbox = (
+ props: React.ComponentPropsWithoutRef
+) => (
{props.children}
-));
+);
-// Custom indicator
-const PurpleIndicator = React.forwardRef<
- HTMLDivElement,
- React.ComponentPropsWithoutRef
->((props, ref) => (
+const PurpleIndicator = (
+ props: React.ComponentPropsWithoutRef
+) => (
✓
-));
-\`\`\`
-
-#### 2. Custom Form Elements
-
-The second approach customizes the form elements (label and error message) while keeping the default checkbox:
-
-\`\`\`tsx
-
-\`\`\`
-
-With the custom form components defined as:
-
-\`\`\`tsx
-// Custom form label component
-const CustomLabel = React.forwardRef<
- HTMLLabelElement,
- React.ComponentPropsWithoutRef
->(({ className, htmlFor, ...props }, ref) => (
-
-));
-
-// Custom error message component
-const CustomErrorMessage = React.forwardRef<
- HTMLParagraphElement,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
- ⚠️ {props.children}
-
-));
+);
\`\`\`
-#### 3. Combining Custom Components
+#### Custom Form Components Example
-The third approach combines both custom checkbox and form elements:
+The second example customizes the form label and error message components:
\`\`\`tsx
-// Create component objects for reuse
-const customCheckboxComponents = {
- Checkbox: PurpleCheckbox,
- CheckboxIndicator: PurpleIndicator,
+const CustomLabel = (
+ props: React.ComponentPropsWithoutRef
+) => {
+ const { className, htmlFor, ...rest } = props;
+ return (
+
+ );
};
-const customLabelComponents = {
- FormLabel: CustomLabel,
- FormMessage: CustomErrorMessage,
+const CustomErrorMessage = (
+ props: React.ComponentPropsWithoutRef
+) => {
+ const { className, ...rest } = props;
+ return (
+
+ ⚠️ {props.children}
+
+ );
};
-
-// Use spread operator to combine them
-
\`\`\`
-
-### Key Points
-
-- Always use React.forwardRef when creating custom components
-- Make sure to spread the props to pass all necessary attributes
-- Include the ref to maintain form functionality
-- Add a displayName to your component for better debugging
-- The components prop accepts replacements for Checkbox, CheckboxIndicator, FormLabel, FormMessage, and FormDescription
-- You can mix and match different custom components as needed
-`,
+ `,
},
source: {
code: `
// Custom checkbox component
-const PurpleCheckbox = React.forwardRef<
- HTMLButtonElement,
- React.ComponentPropsWithoutRef
->((props, ref) => (
+const PurpleCheckbox = (
+ props: React.ComponentPropsWithoutRef
+) => (
{props.children}
-));
+);
// Custom indicator
-const PurpleIndicator = React.forwardRef<
- HTMLDivElement,
- React.ComponentPropsWithoutRef
->((props, ref) => (
+const PurpleIndicator = (
+ props: React.ComponentPropsWithoutRef
+) => (
✓
-));
+);
// Custom form label component
-const CustomLabel = React.forwardRef<
- HTMLLabelElement,
- React.ComponentPropsWithoutRef
->(({ className, htmlFor, ...props }, ref) => (
-
-));
+const CustomLabel = (
+ props: React.ComponentPropsWithoutRef
+) => {
+ const { className, htmlFor, ...rest } = props;
+ return (
+
+ );
+};
// Custom error message component
-const CustomErrorMessage = React.forwardRef<
- HTMLParagraphElement,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
- ⚠️ {props.children}
-
-));
+const CustomErrorMessage = (
+ props: React.ComponentPropsWithoutRef
+) => {
+ const { className, ...rest } = props;
+ return (
+
+ ⚠️ {props.children}
+
+ );
+};
// Usage in form
-
-
-`,
+`,
},
},
},
@@ -506,4 +407,4 @@ const CustomErrorMessage = React.forwardRef<
expect(successMessage).toBeInTheDocument();
}
},
-};
\ No newline at end of file
+};
diff --git a/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx b/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
index b5e91f8b..706aef83 100644
--- a/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
+++ b/apps/docs/src/remix-hook-form/checkbox-list.stories.tsx
@@ -2,16 +2,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
import { Button } from '@lambdacurry/forms/ui/button';
import { FormMessage } from '@lambdacurry/forms/ui/form';
-import type { ActionFunctionArgs } from '@remix-run/node';
-import { useFetcher } from '@remix-run/react';
-import { Form } from '@remix-run/react';
import type { Meta, StoryContext, StoryObj } from '@storybook/react';
import { expect, userEvent } from '@storybook/test';
import type {} from '@testing-library/dom';
-import * as React from 'react';
+import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
import { z } from 'zod';
-import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
+import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
const AVAILABLE_COLORS = [
{ value: 'red', label: 'Red' },
@@ -30,21 +27,17 @@ const formSchema = z.object({
type FormData = z.infer;
// Custom FormLabel component that makes the entire area clickable
-const FullWidthLabel = React.forwardRef>(
- ({ className, children, htmlFor, ...props }, ref) => {
- return (
-
- );
- },
-);
-FullWidthLabel.displayName = 'FullWidthLabel';
+const FullWidthLabel = ({ className, children, htmlFor, ...props }: React.ComponentPropsWithoutRef<'label'>) => {
+ return (
+
+ );
+};
const ControlledCheckboxListExample = () => {
const fetcher = useFetcher<{ message: string; selectedColors: string[] }>();
@@ -130,11 +123,14 @@ const meta: Meta = {
parameters: { layout: 'centered' },
tags: ['autodocs'],
decorators: [
- withRemixStubDecorator({
- root: {
- Component: ControlledCheckboxListExample,
- action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
- },
+ withReactRouterStubDecorator({
+ routes: [
+ {
+ path: '/',
+ Component: ControlledCheckboxListExample,
+ action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+ },
+ ],
}),
],
} satisfies Meta;
diff --git a/apps/docs/src/remix-hook-form/checkbox.stories.tsx b/apps/docs/src/remix-hook-form/checkbox.stories.tsx
index 50ef78f6..3a4b0b86 100644
--- a/apps/docs/src/remix-hook-form/checkbox.stories.tsx
+++ b/apps/docs/src/remix-hook-form/checkbox.stories.tsx
@@ -1,13 +1,12 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
import { Button } from '@lambdacurry/forms/ui/button';
-import type { ActionFunctionArgs } from '@remix-run/node';
-import { useFetcher } from '@remix-run/react';
import type { Meta, StoryContext, StoryObj } from '@storybook/react';
import { expect, userEvent } from '@storybook/test';
+import { type ActionFunctionArgs, useFetcher } from 'react-router';
import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
import { z } from 'zod';
-import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
+import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
const formSchema = z.object({
terms: z.boolean().refine((val) => val === true, 'You must accept the terms and conditions'),
@@ -70,11 +69,14 @@ const meta: Meta = {
parameters: { layout: 'centered' },
tags: ['autodocs'],
decorators: [
- withRemixStubDecorator({
- root: {
- Component: ControlledCheckboxExample,
- action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
- },
+ withReactRouterStubDecorator({
+ routes: [
+ {
+ path: '/',
+ Component: ControlledCheckboxExample,
+ action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+ },
+ ],
}),
],
} satisfies Meta;
diff --git a/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx b/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
new file mode 100644
index 00000000..d24c5b72
--- /dev/null
+++ b/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
@@ -0,0 +1,258 @@
+import { DataTableRouterForm } from '@lambdacurry/forms/remix-hook-form/data-table-router-form';
+import { dataTableRouterParsers } from '@lambdacurry/forms/remix-hook-form/data-table-router-parsers';
+import { DataTableColumnHeader } from '@lambdacurry/forms/ui/data-table/data-table-column-header';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { type LoaderFunctionArgs, useLoaderData } from 'react-router';
+import { z } from 'zod';
+import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
+
+// Define the data schema
+const userSchema = z.object({
+ id: z.string(),
+ name: z.string(),
+ email: z.string().email(),
+ role: z.enum(['admin', 'user', 'editor']),
+ status: z.enum(['active', 'inactive', 'pending']),
+ createdAt: z.string().datetime(),
+});
+
+type User = z.infer;
+
+// Sample data
+const users: User[] = Array.from({ length: 100 }).map((_, i) => ({
+ id: `user-${i + 1}`,
+ name: `User ${i + 1}`,
+ email: `user${i + 1}@example.com`,
+ role: i % 3 === 0 ? 'admin' : i % 3 === 1 ? 'user' : 'editor',
+ status: i % 3 === 0 ? 'active' : i % 3 === 1 ? 'inactive' : 'pending',
+ createdAt: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toISOString(),
+}));
+
+// Define response type
+interface DataResponse {
+ data: User[];
+ meta: {
+ total: number;
+ page: number;
+ pageSize: number;
+ pageCount: number;
+ };
+}
+
+// Define the columns
+const columns: ColumnDef[] = [
+ {
+ accessorKey: 'id',
+ header: ({ column }) => ,
+ cell: ({ row }) => {row.getValue('id')}
,
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: 'name',
+ header: ({ column }) => ,
+ cell: ({ row }) => {row.getValue('name')}
,
+ },
+ {
+ accessorKey: 'email',
+ header: ({ column }) => ,
+ cell: ({ row }) => {row.getValue('email')}
,
+ },
+ {
+ accessorKey: 'role',
+ header: ({ column }) => ,
+ cell: ({ row }) => {row.getValue('role')}
,
+ enableColumnFilter: true,
+ filterFn: (row, id, value: string[]) => {
+ return value.includes(row.getValue(id));
+ },
+ },
+ {
+ accessorKey: 'status',
+ header: ({ column }) => ,
+ cell: ({ row }) => {row.getValue('status')}
,
+ enableColumnFilter: true,
+ filterFn: (row, id, value: string[]) => {
+ return value.includes(row.getValue(id));
+ },
+ },
+ {
+ accessorKey: 'createdAt',
+ header: ({ column }) => ,
+ cell: ({ row }) => {new Date(row.getValue('createdAt')).toLocaleDateString()}
,
+ },
+];
+
+// Component to display the data table with router form integration
+function DataTableRouterFormExample() {
+ const loaderData = useLoaderData();
+
+ // Ensure we have data even if loaderData is undefined
+ const data = loaderData?.data ?? [];
+ const pageCount = loaderData?.meta.pageCount ?? 0;
+
+ console.log('DataTableRouterFormExample - loaderData:', loaderData);
+
+ return (
+
+
Users Table (React Router Form Integration)
+
This example demonstrates integration with React Router forms, including:
+
+ - Form-based filtering with automatic submission
+ - Loading state while waiting for data
+ - Server-side filtering and pagination
+ - URL-based state management with React Router
+
+
+ columns={columns}
+ data={data}
+ pageCount={pageCount}
+ filterableColumns={[
+ {
+ id: 'role' as keyof User,
+ title: 'Role',
+ options: [
+ { label: 'Admin', value: 'admin' },
+ { label: 'User', value: 'user' },
+ { label: 'Editor', value: 'editor' },
+ ],
+ },
+ {
+ id: 'status' as keyof User,
+ title: 'Status',
+ options: [
+ { label: 'Active', value: 'active' },
+ { label: 'Inactive', value: 'inactive' },
+ { label: 'Pending', value: 'pending' },
+ ],
+ },
+ ]}
+ searchableColumns={[
+ {
+ id: 'name' as keyof User,
+ title: 'Name',
+ },
+ ]}
+ />
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -217,45 +206,36 @@ const CustomRadioGroupExample = () => {
description="Choose the plan that best fits your needs."
className="space-y-2"
>
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -267,45 +247,36 @@ const CustomRadioGroupExample = () => {
description="Choose the plan that best fits your needs."
className="space-y-2"
>
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -317,20 +288,59 @@ const CustomRadioGroupExample = () => {
description="Choose the plan that best fits your needs."
className="space-y-4"
>
-
- Starter
- Perfect for beginners
-
-
-
- Pro
- For professional users
-
-
-
- Enterprise
- For large organizations
-
+
+ Starter
+
+ Perfect for small projects
+
+
+ }
+ components={{
+ Label: FullWidthCardLabel,
+ }}
+ />
+
+
+ Pro
+
+ For professional developers
+
+
+ }
+ components={{
+ Label: FullWidthCardLabel,
+ }}
+ />
+
+
+ Enterprise
+
+ Advanced features for teams
+
+
+ }
+ components={{
+ Label: FullWidthCardLabel,
+ }}
+ />
@@ -340,24 +350,15 @@ const CustomRadioGroupExample = () => {
name="requiredPlan"
label="Select a required plan"
description="This field is required."
- className="space-y-2"
+ options={[
+ { value: 'starter', label: 'Starter', id: 'starter-5' },
+ { value: 'pro', label: 'Pro', id: 'pro-5' },
+ { value: 'enterprise', label: 'Enterprise', id: 'enterprise-5' },
+ ]}
components={{
FormMessage: PurpleErrorMessage,
}}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
+ />
@@ -397,11 +398,14 @@ type Story = StoryObj;
export const CustomComponents: Story = {
render: () => ,
decorators: [
- withRemixStubDecorator({
- root: {
- Component: CustomRadioGroupExample,
- action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
- },
+ withReactRouterStubDecorator({
+ routes: [
+ {
+ path: '/',
+ Component: CustomRadioGroupExample,
+ action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+ },
+ ],
}),
],
parameters: {
@@ -412,7 +416,7 @@ export const CustomComponents: Story = {
source: {
code: `
import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
-import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
+import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import * as React from 'react';
import { cn } from '@lambdacurry/forms/ui/utils';
@@ -434,11 +438,9 @@ import { cn } from '@lambdacurry/forms/ui/utils';
FormMessage: PurpleErrorMessage,
}}
>
-
-
-
-
- {/* More radio items */}
+
+
+
/**
@@ -453,27 +455,23 @@ import { cn } from '@lambdacurry/forms/ui/utils';
description="Choose the plan that best fits your needs."
className="space-y-2"
>
-
-
-
-
+
{/* More radio items */}
/**
- * Example 3: Custom Radio Items with Icon
+ * Example 3: Using RadioGroupItem with built-in label and custom Label component
*
- * You can replace the default indicator with a custom icon.
- * This example uses an SVG checkmark instead of the default circle.
+ * Our RadioGroupItem component can use a custom Label component
*/
-
-
-
-
+
+
{/* More radio items */}
/**
- * Example 4: Card-Style Radio Buttons
+ * Example 4: Using options prop for automatic items with labels
*
- * You can completely transform the appearance of radio buttons
- * by creating a custom component that uses RadioGroupPrimitive.Item.
- * This example creates card-style radio buttons with rich content.
+ * You can use the options prop to automatically generate radio items with labels
*/
-
-// Card-style radio group item component
-const CardRadioGroupItem = React.forwardRef((props, ref) => {
- const { value, children, className, ...otherProps } = props;
-
- return (
-
-
-
- );
-});
-
-// Usage with card-style radio buttons
-
- Starter
- Perfect for beginners
-
-
-
- Pro
- For professional users
-
-
-
- Enterprise
- For large organizations
-
-
+ options={[
+ { value: 'starter', label: 'Starter', id: 'starter-4' },
+ { value: 'pro', label: 'Pro', id: 'pro-4' },
+ { value: 'enterprise', label: 'Enterprise', id: 'enterprise-4' }
+ ]}
+ itemClassName="bg-purple-50 p-3 rounded-lg border border-purple-100 hover:bg-purple-100 transition-all"
+ labelClassName="text-purple-800 font-bold"
+/>
/**
- * Example 5: Required Radio Group
+ * Example 5: Required Radio Group with options prop
*
- * You can create a required radio group by using Zod validation.
- * This example shows how to display custom error messages when validation fails.
+ * You can create a required radio group with automatic items
*/
-
-
-
-
- {/* More radio items */}
-
+/>
// Zod schema with required field
const formSchema = z.object({
@@ -611,10 +555,17 @@ const formSchema = z.object({
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- // Test 1: Verify custom label is rendered with purple styling
- const customLabel = canvas.getAllByText('Select a plan')[0];
- expect(customLabel).toHaveClass('text-purple-700');
- expect(customLabel).toHaveClass('font-bold');
+ // Test 1: Verify custom labels are rendered
+ const planLabels = canvas.getAllByText('Select a plan');
+ expect(planLabels.length).toBeGreaterThan(0);
+
+ // Find section with custom radio items
+ const customRadioItemSection = canvas.getByText('Custom Radio Items with Icon').closest('div');
+ expect(customRadioItemSection).toBeTruthy();
+
+ // Verify radio labels exist
+ const starterLabel = within(customRadioItemSection as HTMLElement).getByText('Starter');
+ expect(starterLabel).toBeInTheDocument();
// Test 2: Verify card-style radio buttons work
const cardStyleContainer = canvas.getByText('Card-Style Radio Buttons').closest('div');
@@ -622,16 +573,17 @@ const formSchema = z.object({
throw new Error('Could not find card-style container');
}
- // Find and click the Enterprise card option
- const enterpriseCard = within(cardStyleContainer as HTMLElement)
- .getByText('Enterprise')
- .closest('button');
- if (!enterpriseCard) {
- throw new Error('Could not find Enterprise card option');
+ // Find all radio inputs in the card-style container and select the one with "enterprise" value
+ // A more reliable approach than looking for text and closest button
+ const radioInputs = within(cardStyleContainer as HTMLElement).getAllByRole('radio');
+ const enterpriseOption = radioInputs.find((input) => input.getAttribute('value') === 'enterprise');
+
+ if (!enterpriseOption) {
+ throw new Error('Could not find Enterprise radio option');
}
- await userEvent.click(enterpriseCard);
- expect(enterpriseCard).toHaveAttribute('data-state', 'checked');
+ await userEvent.click(enterpriseOption);
+ expect(enterpriseOption).toBeChecked();
// Test 3: Verify required field validation
const submitButton = canvas.getByRole('button', { name: 'Submit' });
@@ -647,7 +599,14 @@ const formSchema = z.object({
throw new Error('Could not find required radio group container');
}
- const proOption = within(requiredContainer as HTMLElement).getByLabelText('Pro');
+ // Find all radio inputs in the required container and select the one for "Pro"
+ const requiredRadioInputs = within(requiredContainer as HTMLElement).getAllByRole('radio');
+ const proOption = requiredRadioInputs.find((input) => input.getAttribute('value') === 'pro');
+
+ if (!proOption) {
+ throw new Error('Could not find Pro option in required field');
+ }
+
await userEvent.click(proOption);
// Submit the form again
diff --git a/apps/docs/src/remix-hook-form/radio-group.stories.tsx b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
index 84c412a8..bc784422 100644
--- a/apps/docs/src/remix-hook-form/radio-group.stories.tsx
+++ b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
@@ -1,29 +1,59 @@
import { zodResolver } from '@hookform/resolvers/zod';
-import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
+import { RadioGroup, type RadioOption } from '@lambdacurry/forms/remix-hook-form/radio-group';
+import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';
import { Button } from '@lambdacurry/forms/ui/button';
-import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
-import type { ActionFunctionArgs } from '@remix-run/node';
-import { Form, useFetcher } from '@remix-run/react';
-import type { Meta, StoryContext, StoryObj } from '@storybook/react';
-import { expect, userEvent } from '@storybook/test';
+import { Label } from '@lambdacurry/forms/ui/label';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import type { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
import { z } from 'zod';
-import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
+import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
+
+const AVAILABLE_SIZES: RadioOption[] = [
+ { value: 'xs', label: 'Extra Small' },
+ { value: 'sm', label: 'Small' },
+ { value: 'md', label: 'Medium' },
+ { value: 'lg', label: 'Large' },
+ { value: 'xl', label: 'Extra Large' },
+];
+
+const AVAILABLE_COLORS: RadioOption[] = [
+ { value: 'red', label: 'Red' },
+ { value: 'blue', label: 'Blue' },
+ { value: 'green', label: 'Green' },
+ { value: 'yellow', label: 'Yellow' },
+ { value: 'purple', label: 'Purple' },
+];
const formSchema = z.object({
- plan: z.enum(['starter', 'pro', 'enterprise'], {
- required_error: 'You need to select a plan',
+ size: z.enum(['xs', 'sm', 'md', 'lg', 'xl'], {
+ required_error: 'Please select a size',
+ }),
+ color: z.enum(['red', 'blue', 'green', 'yellow', 'purple'], {
+ required_error: 'Please select a color',
+ }),
+ design: z.enum(['modern', 'classic', 'vintage'], {
+ required_error: 'Please select a design',
}),
});
type FormData = z.infer;
-const RemixRadioGroupExample = () => {
- const fetcher = useFetcher<{ message?: string }>();
+// Custom label style component
+const CustomLabel: ComponentType> = (props) => {
+ return ;
+};
+CustomLabel.displayName = 'CustomLabel';
+
+// Radio group example with multiple usage patterns
+const RadioGroupExample = () => {
+ const fetcher = useFetcher<{ message: string; data?: FormData; errors?: Record }>();
const methods = useRemixForm({
resolver: zodResolver(formSchema),
defaultValues: {
- plan: undefined,
+ size: 'md',
},
fetcher,
submitConfig: {
@@ -35,46 +65,96 @@ const RemixRadioGroupExample = () => {
return (