{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-autocomplete-12","type":"registry:block","title":"Form integration","description":"Form integration","dependencies":["@hookform/resolvers","react-hook-form","sonner","zod"],"registryDependencies":["alert","@reui/autocomplete","button","field"],"files":[{"path":"c-autocomplete-12.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n} from \"@/components/reui/autocomplete\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Alert, AlertDescription } from \"@/components/ui/alert\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldSet,\n} from \"@/components/ui/field\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst FormSchema = z.object({\n  feature: z\n    .string()\n    .min(1, \"Please select an item.\")\n    .refine(\n      (val) => items.some((item) => item.value === val),\n      \"Please select a valid item.\"\n    ),\n})\n\nexport function Pattern() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: { feature: \"\" },\n    mode: \"onSubmit\",\n    reValidateMode: \"onSubmit\",\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast.success(\"Form submitted\", {\n      description: (\n        <Alert variant=\"default\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconAlertCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n            remixicon=\"RiErrorWarningLine\"\n          />\n          <AlertDescription>\n            Your form has successfully submitted with feature: {data.feature}\n          </AlertDescription>\n        </Alert>\n      ),\n    })\n\n    form.reset()\n  }\n\n  return (\n    <div className=\"w-full max-w-xs\">\n      <form onSubmit={form.handleSubmit(onSubmit)}>\n        <FieldGroup>\n          <FieldSet>\n            <FieldGroup>\n              <Controller\n                name=\"feature\"\n                control={form.control}\n                render={({ field, fieldState }) => (\n                  <Field data-invalid={fieldState.invalid || undefined}>\n                    <FieldLabel htmlFor=\"autocomplete-feature\">\n                      Select Feature\n                    </FieldLabel>\n                    <Autocomplete\n                      items={items}\n                      value={field.value}\n                      onValueChange={(value) => {\n                        field.onChange(value)\n                      }}\n                    >\n                      <AutocompleteInput\n                        id=\"autocomplete-feature\"\n                        placeholder=\"e.g. feature\"\n                        aria-invalid={!!form.formState.errors.feature}\n                      />\n                      <AutocompleteContent>\n                        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n                        <AutocompleteList>\n                          {(item) => (\n                            <AutocompleteItem key={item.id} value={item.value}>\n                              {item.value}\n                            </AutocompleteItem>\n                          )}\n                        </AutocompleteList>\n                      </AutocompleteContent>\n                    </Autocomplete>\n                    <FieldDescription>\n                      Search and select a component feature.\n                    </FieldDescription>\n                    {fieldState.error && (\n                      <FieldError>{fieldState.error?.message}</FieldError>\n                    )}\n                  </Field>\n                )}\n              />\n            </FieldGroup>\n          </FieldSet>\n          <Field orientation=\"horizontal\">\n            <Button\n              variant=\"outline\"\n              type=\"button\"\n              onClick={() => form.reset()}\n              className=\"flex-1\"\n            >\n              Cancel\n            </Button>\n            <Button type=\"submit\" className=\"flex-1\">\n              Submit\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n\ninterface Item {\n  id: string\n  value: string\n}\n\nconst items: Item[] = [\n  { id: \"t1\", value: \"feature\" },\n  { id: \"t2\", value: \"fix\" },\n  { id: \"t3\", value: \"bug\" },\n  { id: \"t4\", value: \"docs\" },\n  { id: \"t5\", value: \"internal\" },\n  { id: \"t6\", value: \"mobile\" },\n  { id: \"c-accordion\", value: \"component: accordion\" },\n  { id: \"c-alert-dialog\", value: \"component: alert dialog\" },\n  { id: \"c-autocomplete\", value: \"component: autocomplete\" },\n  { id: \"c-avatar\", value: \"component: avatar\" },\n  { id: \"c-checkbox\", value: \"component: checkbox\" },\n  { id: \"c-checkbox-group\", value: \"component: checkbox group\" },\n  { id: \"c-collapsible\", value: \"component: collapsible\" },\n  { id: \"c-combobox\", value: \"component: combobox\" },\n  { id: \"c-context-menu\", value: \"component: context menu\" },\n  { id: \"c-dialog\", value: \"component: dialog\" },\n  { id: \"c-field\", value: \"component: field\" },\n  { id: \"c-fieldset\", value: \"component: fieldset\" },\n  { id: \"c-filterable-menu\", value: \"component: filterable menu\" },\n  { id: \"c-form\", value: \"component: form\" },\n  { id: \"c-input\", value: \"component: input\" },\n  { id: \"c-menu\", value: \"component: menu\" },\n  { id: \"c-menubar\", value: \"component: menubar\" },\n  { id: \"c-meter\", value: \"component: meter\" },\n  { id: \"c-navigation-menu\", value: \"component: navigation menu\" },\n  { id: \"c-number-field\", value: \"component: number field\" },\n  { id: \"c-popover\", value: \"component: popover\" },\n  { id: \"c-preview-card\", value: \"component: preview card\" },\n  { id: \"c-progress\", value: \"component: progress\" },\n  { id: \"c-radio\", value: \"component: radio\" },\n  { id: \"c-scroll-area\", value: \"component: scroll area\" },\n  { id: \"c-select\", value: \"component: select\" },\n  { id: \"c-separator\", value: \"component: separator\" },\n  { id: \"c-slider\", value: \"component: slider\" },\n  { id: \"c-switch\", value: \"component: switch\" },\n  { id: \"c-tabs\", value: \"component: tabs\" },\n  { id: \"c-toast\", value: \"component: toast\" },\n  { id: \"c-toggle\", value: \"component: toggle\" },\n  { id: \"c-toggle-group\", value: \"component: toggle group\" },\n  { id: \"c-toolbar\", value: \"component: toolbar\" },\n  { id: \"c-tooltip\", value: \"component: tooltip\" },\n]","target":"components/examples/c-autocomplete-12.tsx"}],"meta":{"order":12,"label":"Form Integration"}}