FormSelect

Pre-built Select field component with integrated form state.

import { FormSelect } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`label`	Optional	`string \| undefined`	—	—
`description`	Optional	`string \| undefined`	—	—
`placeholder`	Optional	`string \| undefined`	—	—
`options`	Required	`FormSelectOption[]`	—	—
`selectProps`	Optional	`Omit<SelectSharedProps & { value?: string \| undefined; defaultValue?: string \| undefined; onValueChange?(value: string): void; } & { allowClear?: boolean \| undefined; }, "defaultValue" \| "onValueChange"> \| undefined`	—	—

Usage

Form primitives built on react-hook-form. Use with a useForm() instance.

Pieces

Form — wraps a <form> and provides FormProvider context.
FormField — wraps react-hook-form's Controller and provides field context.
FormItem — layout wrapper that generates IDs for accessibility linking.
FormLabel, FormControl, FormDescription, FormMessage — slots.

Notes

Pre-built field helpers (FormInput, FormSelect, FormCheckbox, FormDatePicker, FormCascader, etc.) live in form-fields.tsx.
See the directory's README.md and QUICK_REFERENCE.md for the full pattern catalog.

Example

/** * Runnable example for Form (react-hook-form + zod). */import { zodResolver } from '@hookform/resolvers/zod'import { useForm } from 'react-hook-form'import { z } from 'zod'import {  Button,  Form,  FormControl,  FormField,  FormItem,  FormLabel,  FormMessage,  Input,} from '@tetherto/mdk-react-devkit'const schema = z.object({  name: z.string().min(2, 'At least 2 characters'),  email: z.string().email('Must be a valid email'),})type FormValues = z.infer<typeof schema>export const FormExample = () => {  const form = useForm<FormValues>({    resolver: zodResolver(schema),    defaultValues: { name: '', email: '' },  })  const onSubmit = (values: FormValues) => {    // eslint-disable-next-line no-console    console.log('submit', values)  }  return (    <Form form={form} onSubmit={form.handleSubmit(onSubmit)}>      <FormField        control={form.control}        name="name"        render={({ field }) => (          <FormItem>            <FormLabel>Name</FormLabel>            <FormControl>              <Input placeholder="Operator name" {...field} />            </FormControl>            <FormMessage />          </FormItem>        )}      />      <FormField        control={form.control}        name="email"        render={({ field }) => (          <FormItem>            <FormLabel>Email</FormLabel>            <FormControl>              <Input placeholder="ops@example.com" {...field} />            </FormControl>            <FormMessage />          </FormItem>        )}      />      <Button type="submit" variant="primary">        Submit      </Button>    </Form>  )}