Form Components

Form components for building data entry interfaces.

Prerequisites

Complete the installation

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

Core form workflow

import { Form, FormField } from '@tetherto/mdk-react-devkit'

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

useFormField

@tetherto/mdk-react-devkit

Pre-built input field

import { FormInput } from '@tetherto/mdk-react-devkit'

Use FormInput when a standard text-like field should bind directly to react-hook-form with the usual label, description, control and validation message. Use the lower-level FormField composition when the field needs custom layout or control behaviour.

`FormInput` example

<FormInput
  control={form.control}
  name="email"
  label="Email"
  type="email"
  placeholder="user@example.com"
  description="We'll never share your email"
/>

@tetherto/mdk-react-devkit

Date range picker

import { DateRangePicker } from '@tetherto/mdk-react-devkit'

Single-date and range-date pickers built on react-day-picker. The range picker includes presets and a modal-style popover with Clear / Apply actions.

`DatePicker` props

Prop	Type	Required	Default	Description
`selected`	`Date`	no	—	Selected date.
`onSelect`	`(date?: Date) => void`	no	—	Setter.
`placeholder`	`string`	no	`"Pick a date"`	Trigger button placeholder.
`dateFormat`	`string`	no	`"MM/dd/yyyy"`	`date-fns` format string.
`disabled`	`boolean`	no	`false`	Disable the trigger.
`triggerClassName`	`string`	no	—	Class names on the trigger button.
`calendarClassName`	`string`	no	—	Class names on the day-picker.

`DateRangePicker` props

Adds showPresets, presets: PresetItem[], allowFutureDates, and modalClassName. selected / onSelect use DateRange.

Data contracts

type DateRange = { from: Date | undefined; to?: Date | undefined };
type PresetItem = { label: string; value: DateRange };

Example

/**
 * Runnable example for DatePicker and DateRangePicker.
 */
import { useState } from 'react'
import type { DateRange } from '@tetherto/mdk-react-devkit'
import { DatePicker, DateRangePicker } from '@tetherto/mdk-react-devkit'

export const DatePickerExample = () => {
  const [date, setDate] = useState<Date>()
  const [range, setRange] = useState<DateRange>()

  return (
    <div className="mdk-example-row">
      <DatePicker selected={date} onSelect={setDate} />
      <DateRangePicker selected={range} onSelect={setRange} showPresets />
    </div>
  )
}

@tetherto/mdk-react-devkit

`Cascader`

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

Features: - Two-column layout: categories on left, options on right - Single or multiple selection modes - Search/filter functionality via TagInput - Category-level selection (select/deselect all children) - Indeterminate state for partial selections - Tag display for multiple selections - Keyboard navigation support - Disabled state support

agent-ready

Prop	Type	Required	Default	Description
`options`	`CascaderOption[]`	✓	-	Hierarchical options to display in the cascader Parent options with children appear in the left panel Child options appear in the right panel when parent is selected
`value`	`CascaderValue \| CascaderValue[] \| undefined`		-	Current selected value(s) - For single select: CascaderValue (e.g., ['category', 'option']) - For multiple select: CascaderValue[] (e.g., [['cat1', 'opt1'], ['cat2', 'opt2']])
`onChange`	`((value: CascaderValue \| CascaderValue[] \| null) => void) \| undefined`		-	Callback when selection changes - For single select: receives CascaderValue or null - For multiple select: receives CascaderValue[] or null
`multiple`	`boolean \| undefined`		`false`	Enable multiple selection mode - true: Shows checkboxes, allows multiple selections, displays selected items as tags - false: Shows radio buttons, allows single selection
`placeholder`	`string \| undefined`		`'Select...'`	Placeholder text shown in the input when no selections are made
`disabled`	`boolean \| undefined`		`false`	Disable the entire cascader (input and all options)
`className`	`string \| undefined`		-	Custom className for the root cascader element
`dropdownClassName`	`string \| undefined`		-	Custom className for the dropdown panels container

Prop	Type	Default	Description
`size`	`CheckboxSize \| undefined`	`'md'`	Size variant of the checkbox
`color`	`"success" \| "warning" \| "error" \| "primary" \| "default" \| undefined`	`'primary'`	Color variant when checked
`radius`	`BorderRadius \| undefined`	`'none'`	Border radius variant
`className`	`string \| undefined`	-	Custom className for the root element
`indicatorClassName`	`string \| undefined`	-	Custom className for the indicator element
`onCheckedChange`	`(((checked: CheckedState) => void) & ((checked: CheckedState) => void)) \| undefined`	-	Callback when the checked state changes

Prop	Type	Required	Default	Description
`value`	`string`	✓	-	-
`className`	`string \| undefined`		-	-
`currencies`	`(string \| CurrencyItem)[]`	✓	-	-
`onChange`	`(currency: string) => void`	✓	-	-

Prop	Type	Default	Description
`selected`	`Date \| undefined`	-	Currently selected date
`onSelect`	`((date: Date \| undefined) => void) \| undefined`	-	Callback when date changes
`placeholder`	`string \| undefined`	`"Pick a date"`	Placeholder text when no date is selected
`dateFormat`	`string \| undefined`	`"MM/dd/yyyy"`	Date format for display
`disabled`	`(boolean & (Matcher \| Matcher[])) \| undefined`	`false`	Whether the picker is disabled
`triggerClassName`	`string \| undefined`	-	Custom className for the trigger button
`calendarClassName`	`string \| undefined`	-	Custom className for the calendar

Form Components

Show installation steps

On this page