new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · all subjects

blocks/development

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Block import path convention

All imports in block files must use the @/registry path, for example: import { Input } from "@/registry/new-york/input". This is a required convention for block contributions.

Block preview URLs

After running the build script, a block can be previewed at http://localhost:3333/blocks/[CATEGORY] for the category view or http://localhost:3333/view/styles/new-york/[BLOCK-NAME] for full screen preview, e.g., http://localhost:3333/view/styles/new-york/dashboard-01.

v0 by Vercel component editing

Every component on ui.shadcn.com is editable on v0 by Vercel, which allows users to easily customize components in natural language and paste them into their app.

React Hook Form integration with shadcn/ui Field component

React Hook Form forms in shadcn/ui are built using the Controller component from React Hook Form combined with the Field component. This approach provides complete flexibility over markup and styling while maintaining accessibility.

Basic form anatomy with Controller and Field

A form using Controller and Field follows this pattern: wrap Controller around the field definition, pass name, control from useForm, and a render function. Inside render, destructure field and fieldState from the render parameter. Wrap the form control in a Field component with data-invalid prop set to fieldState.invalid. Add aria-invalid to the input control (Input, Textarea, etc.) and include FieldLabel, FieldDescription, and FieldError components for a complete accessible field.

useForm setup with Zod validation

Create a form instance with useForm hook, passing an object with resolver set to zodResolver(formSchema), and defaultValues containing initial form data. The form object provides control property for use in Controller, handleSubmit method for form submission, and reset method for resetting form values.

Zod schema validation modes in React Hook Form

React Hook Form supports five validation modes passed to useForm via the mode option: 'onChange' triggers validation on every change, 'onBlur' triggers on blur, 'onSubmit' is the default and triggers only on submit, 'onTouched' triggers on first blur then on every change, and 'all' triggers on both blur and change.

Displaying validation errors in forms

To display form errors, add the data-invalid prop to the Field component set to fieldState.invalid, and add the aria-invalid prop to the form control (Input, SelectTrigger, Checkbox, etc.) also set to fieldState.invalid. Use the FieldError component with errors prop set to an array containing fieldState.error, rendering it conditionally when fieldState.invalid is true.

Input field pattern with React Hook Form

For input fields, spread the field object onto the Input component using {...field}, set id to field.name, add aria-invalid prop set to fieldState.invalid, and wrap in Field component with data-invalid prop. Include FieldLabel with htmlFor matching field.name, and conditionally render FieldError when fieldState.invalid is true.

Textarea field pattern with React Hook Form

For textarea fields, spread the field object onto the Textarea component using {...field}, set id to a unique value, add aria-invalid prop set to fieldState.invalid, and wrap in Field component with data-invalid prop. Include FieldLabel with htmlFor matching the textarea id, optionally include FieldDescription, and conditionally render FieldError when fieldState.invalid is true.

Select field pattern with React Hook Form

For select components, use field.value and field.onChange on the Select component, not the field spread operator. Set name prop to field.name and onValueChange to field.onChange. Add aria-invalid to SelectTrigger and data-invalid to Field component. Wrap in Field with orientation='responsive' for better responsive behavior, and use FieldContent to group FieldLabel, FieldDescription, and FieldError together.

Checkbox array field pattern with React Hook Form

For checkbox arrays, use field.value and field.onChange with array manipulation. The onCheckedChange handler should add the value to field.value if checked, or filter it out if unchecked. Wrap each checkbox in a Field with orientation='horizontal'. Use FieldSet with FieldLegend and FieldDescription as container, and FieldGroup with data-slot='checkbox-group' to wrap checkbox items. Add aria-invalid to Checkbox and data-invalid to individual Field components.

Radio group field pattern with React Hook Form

For radio groups, use field.value and field.onChange on the RadioGroup component. Set name to field.name and onValueChange to field.onChange. Map over radio options, wrapping each in a FieldLabel with htmlFor matching the RadioGroupItem id, and a Field with orientation='horizontal'. Add aria-invalid to RadioGroupItem and data-invalid to Field components. Render FieldError conditionally at the RadioGroup level.

Switch field pattern with React Hook Form

For switches, use field.value and field.onChange on the Switch component. Set checked to field.value and onCheckedChange to field.onChange. Wrap in Field with orientation='horizontal', and use FieldContent to group FieldLabel, FieldDescription, and FieldError. Add aria-invalid to Switch and data-invalid to Field component.

useFieldArray hook for dynamic fields

React Hook Form provides useFieldArray hook for managing dynamic array fields. Pass an object with control from useForm and name for the array field. The hook returns fields array, append method to add new items, and remove method to remove items by index.

Array field key usage in React Hook Form

When mapping over fields from useFieldArray, always use field.id as the React key, not the array index. This ensures proper field tracking by React Hook Form.

Array field structure with FieldSet

Wrap array fields in a FieldSet component with FieldLegend and FieldDescription for labeling and help text. Use FieldGroup inside FieldSet to contain the individual array items.

Adding items to dynamic array fields

Use the append method from useFieldArray to add new items. Pass an object with the field structure (e.g., { address: '' }). Optionally disable the add button by checking fields.length against a maximum value.

Removing items from dynamic array fields

Use the remove method from useFieldArray passing the index to remove that item. Conditionally render the remove button based on fields.length > 1 to prevent removing all items if needed.

Zod array validation

Validate array fields using Zod's array method. Define the array structure with z.array(), pass a schema for each item (typically z.object() for structured items), and chain min() and max() methods to specify length constraints with error messages.

Zod schema for form validation

Define form shape using Zod z.object() with field definitions. Use z.string() for text fields, chain min() and max() with error messages for validation rules, and .optional() for optional fields. Use z.infer<typeof schema> to generate TypeScript types from the schema.

Give your agent this brain