### Configure ESLint for Type-Aware Linting in React/TypeScript

Source: https://github.com/aranlucas/react-hook-form-mantine/blob/master/example/README.md

This configuration snippet shows how to set up ESLint for type-aware linting in a React and TypeScript project. It requires specifying project files and the root directory for TypeScript configuration. Dependencies include `@typescript-eslint/eslint-plugin` and `eslint-plugin-react`.

```javascript
parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   }
```

--------------------------------

### TextInput Component Example using React Hook Form and Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Demonstrates how to use the TextInput component from react-hook-form-mantine for form input. It includes setup with useForm, schema validation using Zod, and displays errors and values. This example requires react-hook-form, @mantine/core, zod, and @hookform/resolvers/zod.

```tsx
import { useForm } from "react-hook-form";
import { TextInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  username: z.string().min(3, "Username must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
});

type FormData = z.infer<typeof schema>;

function LoginForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      username: "",
      email: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form data:", data);
    // Output: { username: "john_doe", email: "john@example.com" }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextInput
        name="username"
        control={control}
        label="Username"
        placeholder="Enter your username"
        withAsterisk
      />
      <TextInput
        name="email"
        control={control}
        label="Email"
        placeholder="your.email@example.com"
        withAsterisk
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

```

--------------------------------

### Select Component Example using React Hook Form and Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Illustrates the usage of the Select component from react-hook-form-mantine for dropdown selections. It integrates with useForm and Zod for validation, defining options and handling form submission. Dependencies include react-hook-form, @mantine/core, zod, and @hookform/resolvers/zod.

```tsx
import { useForm } from "react-hook-form";
import { Select } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  framework: z.string().min(1, "Please select a framework"),
  language: z.string(),
});

type FormData = z.infer<typeof schema>;

function PreferencesForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      framework: "",
      language: "typescript",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Selected preferences:", data);
    // Output: { framework: "react", language: "typescript" }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        name="framework"
        control={control}
        label="Your favorite framework"
        placeholder="Pick one"
        data={[
          { value: "react", label: "React" },
          { value: "vue", label: "Vue" },
          { value: "angular", label: "Angular" },
          { value: "svelte", label: "Svelte" },
        ]}
        withAsterisk
      />
      <Select
        name="language"
        control={control}
        label="Programming Language"
        data={[
          { value: "javascript", label: "JavaScript" },
          { value: "typescript", label: "TypeScript" },
        ]}
      />
      <Button type="submit">Save Preferences</Button>
    </form>
  );
}

```

--------------------------------

### Switch: Toggle for Preferences - React Hook Form / Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Enables boolean toggling using the Switch component from react-hook-form-mantine. This example demonstrates managing user preferences like dark mode and notifications. Zod schema validation ensures correct boolean handling.

```tsx
import { useForm } from "react-hook-form";
import { Switch } from "react-hook-form-mantine";
import { Button, Stack } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  darkMode: z.boolean(),
  notifications: z.boolean(),
  autoSave: z.boolean(),
});

type FormData = z.infer<typeof schema>;

function PreferencesToggleForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      darkMode: false,
      notifications: true,
      autoSave: true,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Preferences:", data);
    // Output: { darkMode: true, notifications: true, autoSave: false }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stack>
        <Switch
          name="darkMode"
          control={control}
          label="Enable dark mode"
        />
        <Switch
          name="notifications"
          control={control}
          label="Enable notifications"
          description="Receive updates about your account"
        />
        <Switch
          name="autoSave"
          control={control}
          label="Auto-save changes"
        />
        <Button type="submit">Save Preferences</Button>
      </Stack>
    </form>
  );
}

```

--------------------------------

### Radio Group Component with React Hook Form and Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Shows how to implement a radio button group using `react-hook-form-mantine`'s `Radio.Group` and `Radio.Item` components. This example includes schema validation with Zod for mutually exclusive selections and integrates with `react-hook-form`.

```tsx
import { useForm } from "react-hook-form";
import { Radio } from "react-hook-form-mantine";
import { Button, Group } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  plan: z.enum(["free", "pro", "enterprise"], {
    required_error: "Please select a plan",
  }),
});

type FormData = z.infer<typeof schema>;

function SubscriptionForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log("Selected plan:", data);
    // Output: { plan: "pro" }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Radio.Group
        name="plan"
        control={control}
        label="Select your subscription plan"
        description="Choose the plan that fits your needs"
        withAsterisk
      >
        <Group mt="xs">
          <Radio.Item value="free" label="Free - $0/month" />
          <Radio.Item value="pro" label="Pro - $19/month" />
          <Radio.Item value="enterprise" label="Enterprise - $99/month" />
        </Group>
      </Radio.Group>
      <Button type="submit" mt="md">
        Subscribe
      </Button>
    </form>
  );
}

```

--------------------------------

### File Upload Input with Type Restrictions (React)

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Demonstrates file uploads using react-hook-form-mantine's FileInput, with support for specifying accepted file types and basic validation for required files. Dependencies include react-hook-form, react-hook-form-mantine, @mantine/core, zod, and @hookform/resolvers.

```tsx
import { useForm } from "react-hook-form";
import { FileInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  resume: z.any().refine((file) => file !== null, "Resume is required"),
  avatar: z.any(),
});

type FormData = z.infer<typeof schema>;

function UploadForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      resume: null,
      avatar: null,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Files:", {
      resume: data.resume?.name,
      avatar: data.avatar?.name,
    });
    // Output: { resume: "resume.pdf", avatar: "profile.jpg" }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FileInput
        name="resume"
        control={control}
        label="Resume"
        placeholder="Upload your resume"
        accept="application/pdf"
        withAsterisk
      />
      <FileInput
        name="avatar"
        control={control}
        label="Profile Picture"
        placeholder="Upload image"
        accept="image/*"
      />
      <Button type="submit">Upload</Button>
    </form>
  );
}

```

--------------------------------

### JSON Input with Validation and Formatting (React)

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Implements a JSON input field using react-hook-form-mantine's JsonInput. It includes Zod schema validation for JSON syntax and auto-formatting on blur. Dependencies include react-hook-form, react-hook-form-mantine, @mantine/core, zod, and @hookform/resolvers.

```tsx
import { useForm } from "react-hook-form";
import { JsonInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  config: z.string().refine((val) => {
    try {
      JSON.parse(val);
      return true;
    } catch {
      return false;
    }
  }, "Invalid JSON"),
});

type FormData = z.infer<typeof schema>;

function ConfigForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      config: '{"apiUrl": "https://api.example.com", "timeout": 5000}',
    },
  });

  const onSubmit = (data: FormData) => {
    const parsed = JSON.parse(data.config);
    console.log("Config:", parsed);
    // Output: { apiUrl: "https://api.example.com", timeout: 5000 }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <JsonInput
        name="config"
        control={control}
        label="Configuration"
        placeholder="Enter JSON configuration"
        validationError="Invalid JSON format"
        formatOnBlur
        autosize
        minRows={4}
        maxRows={12}
      />
      <Button type="submit">Save Config</Button>
    </form>
  );
}

```

--------------------------------

### Number Input Component with React Hook Form and Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Illustrates the use of the `NumberInput` component from `react-hook-form-mantine` for numeric inputs. Includes features like increment/decrement controls, min/max validation, precision settings, and prefix/step configuration, all managed via `react-hook-form` and Zod.

```tsx
import { useForm } from "react-hook-form";
import { NumberInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  age: z.number().min(18, "Must be at least 18").max(120, "Invalid age"),
  quantity: z.number().min(1).max(100),
  price: z.number().positive(),
});

type FormData = z.infer<typeof schema>;

function ProductForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      age: 25,
      quantity: 1,
      price: 0,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form data:", data);
    // Output: { age: 25, quantity: 5, price: 29.99 }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NumberInput
        name="age"
        control={control}
        label="Your age"
        placeholder="Enter your age"
        withAsterisk
      />
      <NumberInput
        name="quantity"
        control={control}
        label="Quantity"
        min={1}
        max={100}
      />
      <NumberInput
        name="price"
        control={control}
        label="Price"
        placeholder="0.00"
        precision={2}
        step={0.01}
        prefix="$"
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

```

--------------------------------

### Slider: Range Input for Settings - React Hook Form / Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Provides a range slider component for numeric value selection using Slider from react-hook-form-mantine. It includes visual markers and labels for clarity. Zod is used for schema validation, ensuring values are within a specified range.

```tsx
import { useForm } from "react-hook-form";
import { Slider } from "react-hook-form-mantine";
import { Button, Text } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  volume: z.number().min(0).max(100),
  brightness: z.number(),
});

type FormData = z.infer<typeof schema>;

function SettingsSliderForm() {
  const { control, handleSubmit, watch } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      volume: 50,
      brightness: 75,
    },
  });

  const volumeValue = watch("volume");

  const onSubmit = (data: FormData) => {
    console.log("Settings:", data);
    // Output: { volume: 75, brightness: 90 }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <Text>Volume: {volumeValue}%</Text>
        <Slider
          name="volume"
          control={control}
          marks={[
            { value: 0, label: "0%" },
            { value: 50, label: "50%" },
            { value: 100, label: "100%" },
          ]}
        />
      </div>
      <div>
        <Text>Brightness</Text>
        <Slider
          name="brightness"
          control={control}
          min={0}
          max={100}
        />
      </div>
      <Button type="submit">Apply</Button>
    </form>
  );
}

```

--------------------------------

### Checkbox Component with React Hook Form and Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Demonstrates how to use the `Checkbox` and `Checkbox.Group` components from `react-hook-form-mantine` for single and multi-selection scenarios. It includes form validation using Zod and integrates seamlessly with `react-hook-form`'s `useForm` hook.

```tsx
import { useForm } from "react-hook-form";
import { Checkbox } from "react-hook-form-mantine";
import { Button, Stack } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  terms: z.boolean().refine((val) => val === true, {
    message: "You must accept the terms",
  }),
  newsletter: z.boolean(),
  notifications: z.array(z.string()),
});

type FormData = z.infer<typeof schema>;

function SettingsForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      terms: false,
      newsletter: true,
      notifications: ["email"],
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Settings:", data);
    // Output: { terms: true, newsletter: true, notifications: ["email", "push"] }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stack>
        <Checkbox
          name="terms"
          control={control}
          label="I agree to the terms and conditions"
        />
        <Checkbox
          name="newsletter"
          control={control}
          label="Subscribe to newsletter"
        />
        <Checkbox.Group
          name="notifications"
          control={control}
          label="Notification preferences"
        >
          <Checkbox.Item value="email" label="Email" />
          <Checkbox.Item value="push" label="Push notifications" />
          <Checkbox.Item value="sms" label="SMS" />
        </Checkbox.Group>
        <Button type="submit">Save</Button>
      </Stack>
    </form>
  );
}

```

--------------------------------

### Textarea Component with Validation

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Implements a multi-line text input with auto-sizing and character limit support using react-hook-form and Zod for validation. It includes a comment field with min/max length and an optional bio field.

```tsx
import { useForm } from "react-hook-form";
import { Textarea } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  comment: z.string().min(10, "Comment must be at least 10 characters").max(500),
  bio: z.string().optional(),
});

type FormData = z.infer<typeof schema>;

function CommentForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      comment: "",
      bio: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Submitted:", data);
    // Output: { comment: "This is my comment...", bio: "Software developer" }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Textarea
        name="comment"
        control={control}
        label="Your comment"
        placeholder="Share your thoughts..."
        withAsterisk
        minRows={3}
        maxRows={6}
        autosize
      />
      <Textarea
        name="bio"
        control={control}
        label="Bio"
        placeholder="Tell us about yourself"
        description="Optional - maximum 500 characters"
      />
      <Button type="submit">Submit Comment</Button>
    </form>
  );
}

```

--------------------------------

### PasswordInput Component with Validation

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Demonstrates a password input field with a show/hide toggle and robust validation using react-hook-form and Zod. It enforces minimum length, requires an uppercase letter and a number, and includes password confirmation.

```tsx
import { useForm } from "react-hook-form";
import { PasswordInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  password: z
    .string()
    .min(8, "Password must be at least 8 characters")
    .regex(/[A-Z]/, "Must contain uppercase letter")
    .regex(/[0-9]/, "Must contain number"),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ["confirmPassword"],
});

type FormData = z.infer<typeof schema>;

function PasswordForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      password: "",
      confirmPassword: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Password set successfully");
    // Output: Password validation passed
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <PasswordInput
        name="password"
        control={control}
        label="Password"
        placeholder="Enter password"
        description="Must be at least 8 characters with uppercase and number"
        withAsterisk
      />
      <PasswordInput
        name="confirmPassword"
        control={control}
        label="Confirm Password"
        placeholder="Re-enter password"
        withAsterisk
      />
      <Button type="submit">Create Account</Button>
    </form>
  );
}

```

--------------------------------

### DatePickerInput: Form with Date Selection - React Hook Form / Mantine

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Implements a date selection input using DatePickerInput from react-hook-form-mantine. It leverages Zod for schema validation, requiring a birth date and allowing an optional appointment date. The component handles date formatting and calendar popups.

```tsx
import { useForm } from "react-hook-form";
import { DatePickerInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  birthDate: z.date().nullable().refine((date) => date !== null, {
    message: "Birth date is required",
  }),
  appointmentDate: z.date().nullable(),
});

type FormData = z.infer<typeof schema>;

function AppointmentForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      birthDate: null,
      appointmentDate: null,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Dates:", data);
    // Output: { birthDate: Date, appointmentDate: Date }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <DatePickerInput
        name="birthDate"
        control={control}
        label="Date of Birth"
        placeholder="Pick your birth date"
        withAsterisk
      />
      <DatePickerInput
        name="appointmentDate"
        control={control}
        label="Appointment Date"
        placeholder="Select appointment date"
        minDate={new Date()}
      />
      <Button type="submit">Book Appointment</Button>
    </form>
  );
}

```

--------------------------------

### Star Rating Input Component (React)

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Utilizes react-hook-form-mantine's Rating component for collecting star-based ratings. Includes Zod validation to ensure a minimum rating is provided. Dependencies are react-hook-form, react-hook-form-mantine, @mantine/core, zod, and @hookform/resolvers.

```tsx
import { useForm } from "react-hook-form";
import { Rating } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  productRating: z.number().min(1, "Please provide a rating"),
  serviceRating: z.number(),
});

type FormData = z.infer<typeof schema>;

function ReviewForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      productRating: 0,
      serviceRating: 3,
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Ratings:", data);
    // Output: { productRating: 5, serviceRating: 4 }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Product Rating</label>
        <Rating name="productRating" control={control} />
      </div>
      <div>
        <label>Service Rating</label>
        <Rating name="serviceRating" control={control} size="lg" />
      </div>
      <Button type="submit">Submit Review</Button>
    </form>
  );
}

```

--------------------------------

### ColorInput Component with Validation

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

Features a color picker text input with a color preview and support for hex/rgb formats, integrated with react-hook-form and Zod for validation. It includes a primary color field with a specific hex format requirement.

```tsx
import { useForm } from "react-hook-form";
import { ColorInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  primaryColor: z.string().regex(/^#[0-9A-F]{6}$/i, "Invalid color format"),
  accentColor: z.string(),
});

type FormData = z.infer<typeof schema>;

function ThemeForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      primaryColor: "#228BE6",
      accentColor: "#FA5252",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Theme colors:", data);
    // Output: { primaryColor: "#228BE6", accentColor: "#FA5252" }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ColorInput
        name="primaryColor"
        control={control}
        label="Primary Color"
        placeholder="Pick color"
        format="hex"
        withAsterisk
      />
      <ColorInput
        name="accentColor"
        control={control}
        label="Accent Color"
        placeholder="Pick accent color"
      />
      <Button type="submit">Apply Theme</Button>
    </form>
  );
}

```

--------------------------------

### TextInput Component

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

The TextInput component from react-hook-form-mantine provides a form text input field with built-in validation and error handling. It wraps Mantine's TextInput component and integrates with React Hook Form.

```APIDOC
## TextInput Component

### Description
Form text input field with built-in validation and error handling, wrapping Mantine's TextInput component with React Hook Form integration.

### Method
N/A (This is a component usage example)

### Endpoint
N/A (This is a component usage example)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A (Component props are used)

### Request Example
```tsx
import { useForm } from "react-hook-form";
import { TextInput } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  username: z.string().min(3, "Username must be at least 3 characters"),
  email: z.string().email("Invalid email address"),
});

type FormData = z.infer<typeof schema>;

function LoginForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      username: "",
      email: "",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Form data:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextInput
        name="username"
        control={control}
        label="Username"
        placeholder="Enter your username"
        withAsterisk
      />
      <TextInput
        name="email"
        control={control}
        label="Email"
        placeholder="your.email@example.com"
        withAsterisk
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}
```

### Response
#### Success Response (200)
N/A (Component interaction, not an API endpoint response)

#### Response Example
N/A
```

--------------------------------

### Select Component

Source: https://context7.com/aranlucas/react-hook-form-mantine/llms.txt

The Select component from react-hook-form-mantine offers a dropdown selection with single value selection, automatic error display, and customizable options. It integrates Mantine's Select component with React Hook Form.

```APIDOC
## Select Component

### Description
Dropdown selection component with single value selection, automatic error display, and customizable options.

### Method
N/A (This is a component usage example)

### Endpoint
N/A (This is a component usage example)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A (Component props are used)

### Request Example
```tsx
import { useForm } from "react-hook-form";
import { Select } from "react-hook-form-mantine";
import { Button } from "@mantine/core";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  framework: z.string().min(1, "Please select a framework"),
  language: z.string(),
});

type FormData = z.infer<typeof schema>;

function PreferencesForm() {
  const { control, handleSubmit } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      framework: "",
      language: "typescript",
    },
  });

  const onSubmit = (data: FormData) => {
    console.log("Selected preferences:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        name="framework"
        control={control}
        label="Your favorite framework"
        placeholder="Pick one"
        data={[
          { value: "react", label: "React" },
          { value: "vue", label: "Vue" },
          { value: "angular", label: "Angular" },
          { value: "svelte", label: "Svelte" },
        ]}
        withAsterisk
      />
      <Select
        name="language"
        control={control}
        label="Programming Language"
        data={[
          { value: "javascript", label: "JavaScript" },
          { value: "typescript", label: "TypeScript" },
        ]}
      />
      <Button type="submit">Save Preferences</Button>
    </form>
  );
}
```

### Response
#### Success Response (200)
N/A (Component interaction, not an API endpoint response)

#### Response Example
N/A
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.