Dynamic Field Array

Start from an empty state, then add and remove teammate rows with per-item validation.

Library

FLX UI

Framework

React

Type

block

License

AGPL-3.0

Dependencies

@tanstack/react-form, lucide-react, sonner, zod

Install

pnpm dlx shadcn@latest add @flx/tsf-advanced-01

Files

• registry/forms/tanstack-form/advanced/tsf-advanced-01.tsx
• src/components/ui/badge.tsx
• src/components/ui/button.tsx
• src/components/ui/card.tsx
• src/components/ui/empty.tsx
• src/components/ui/field.tsx
• src/components/ui/input.tsx
• src/components/ui/select.tsx

Source

https://github.com/felipemenezes098/ui-flx

Categories

• Data Display Components
• React Data Display Components
• Tailwind CSS Data Display Components
• shadcn/ui Data Display Components
• Empty State Components
• React Empty State Components
• Tailwind CSS Empty State Components
• shadcn/ui Empty State Components
• Feedback Components
• React Feedback Components
• Tailwind CSS Feedback Components
• shadcn/ui Feedback Components

More from FLX UI

• Login form
• Notification settings
• Payment form
• Activity Feed
• React Hook Form
• TanStack Form
• Basic
• With actions
• No results
• Avatar group
• In dialog
• Basic