Form Components

Form components for building data entry interfaces.

Prerequisites

• Complete the installation

• Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

Core form workflow

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>
  )
}

Related API

• useFormField

Cascader

Two-panel hierarchical selector for picking a leaf value from a nested tree (categories → subcategories → leaf).

agent-ready

Props

Checkbox

Checkbox component with full customization

agent-ready

Props

CurrencyToggler

CurrencyToggler component for switching between currencies

agent-ready

Props

DatePicker

Single-date selection component built on react-day-picker with the MDK dark theme. Controlled via selected / onSelect.

agent-ready

Props

DateRangePicker

Date-range selection component with preset shortcuts (last 7/14/30/90 days) and a modal interface. Controlled via selected / onSelect.

agent-ready

Props

Form

React Hook Form provider wrapper. Pass the result of useForm() as form and render fields via [**FormField**](/reference/ui/components/forms/#formfield) / [**FormItem**](/reference/ui/components/forms/#formitem) / [**FormLabel**](/reference/ui/components/forms/#formlabel) / [**FormControl**](/reference/ui/components/forms/#formcontrol) / [**FormMessage**](/reference/ui/components/forms/#formmessage).

agent-ready

Props

FormCascader

Pre-built Cascader field component with integrated form state. Perfect for hierarchical selections like categories and subcategories.

agent-ready

Props

FormCheckbox

Pre-built Checkbox field component with integrated form state.

agent-ready

Props

FormControl

Slot-based wrapper that injects ARIA attributes onto its child input element without adding an extra DOM wrapper.

agent-ready

FormDatePicker

Pre-built DatePicker field component with integrated form state.

agent-ready

Props

FormDescription

Optional helper text displayed below the input.

agent-ready

FormField

Wraps react-hook-form's Controller and provides field context to descendants.

agent-ready

FormInput

Pre-built Input field component with integrated form state. Reduces boilerplate by combining FormField, FormItem, FormLabel, FormControl, and FormMessage.

agent-ready

Props

FormItem

Layout wrapper for a form field. Generates a unique ID for accessibility linking.

agent-ready

FormLabel

Label that auto-links to the form field input via generated IDs. Applies error styling when the field has a validation error.

agent-ready

FormMessage

Displays the validation error message from react-hook-form field state. Falls back to children if no error is present. Always renders to prevent layout shift when errors appear.

agent-ready

FormRadioGroup

Pre-built RadioGroup field component with integrated form state.

agent-ready

Props

FormSelect

Pre-built Select field component with integrated form state.

agent-ready

Props

FormSwitch

Pre-built Switch field component with integrated form state.

agent-ready

Props

FormTagInput

Pre-built TagInput field component with integrated form state. Perfect for multi-select with search and tag display.

agent-ready

Props

FormTextArea

Pre-built TextArea field component with integrated form state.

agent-ready

Props

Input

Text input with optional label, prefix/suffix slots, and a search variant. Forwards refs and all native <input> attributes.

agent-ready

Props

Label

Accessible text label for form controls. Associates with an input via htmlFor and supports a required-mark indicator. Built on Radix Label.

agent-ready

MultiLevelSelect

Multi-level select component with collapsible sections.

agent-ready

MultiSelect

Multi-select picker built on Radix Popover + Checkbox. Sibling to <[**Select**](/reference/ui/components/forms/#select)> for cases where consumers need to pick more than one option (filter rows, multi-target actions, tag-style inputs). The pop…

agent-ready

Props

Radio

Radio button component (use within RadioGroup)

agent-ready

Props

RadioCard

RadioCard component - button-like radio option

agent-ready

Props

RadioGroup

RadioGroup component - container for Radio items

agent-ready

Props

Select

Dropdown select built on Radix UI. Supports default and colored variants, multiple sizes, and full keyboard navigation.

agent-ready

Props

Switch

Switch component for toggle controls with full customization

agent-ready

Props

TagInput

Text input that converts comma- or Enter-separated entries into removable tag chips below the field.

agent-ready

Props

TextArea

TextArea component with label support and error handling

agent-ready

Props