Form

Form components for building data entry interfaces.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

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

Components

@tetherto/mdk-react-devkit

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

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.

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

Import the public APIs on this page from @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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/cascader/index.tsx

Prop	Status	Type / Options	Default	Description
`options`	Required	`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
`className`	Optional	`string`	-	Custom className for the root cascader element
`disabled`	Optional	`boolean`	`false`	Disable the entire cascader (input and all options)
`dropdownClassName`	Optional	`string`	-	Custom className for the dropdown panels container
`multiple`	Optional	`boolean`	`false`	Enable multiple selection mode - true: Shows checkboxes, allows multiple selections, displays selected items as tags - false: Shows radio buttons, allows single selection
`onChange`	Optional	`((value: CascaderValue \| CascaderValue[] \| null) => void)`	-	Callback when selection changes - For single select: receives CascaderValue or null - For multiple select: receives CascaderValue[] or null
`placeholder`	Optional	`string`	`"Select..."`	Placeholder text shown in the input when no selections are made
`value`	Optional	`CascaderValue \| CascaderValue[]`	-	Current selected value(s) - For single select: CascaderValue (e.g., ['category', 'option']) - For multiple select: CascaderValue[] (e.g., [['cat1', 'opt1'], ['cat2', 'opt2']])

Prop	Status	Type / Options	Default	Description
`checked`	Optional	`CheckedState`	-	Controlled checked state
`className`	Optional	`string`	-	Custom className for the root element
`color`	Optional	`"success" \| "warning" \| "error" \| "primary" \| "default"`	`"primary"`	Color variant when checked
`defaultChecked`	Optional	`CheckedState`	-	Uncontrolled initial checked state
`disabled`	Optional	`boolean`	`false`	Disable the input
`indicatorClassName`	Optional	`string`	-	Custom className for the indicator element
`onCheckedChange`	Optional	`(((checked: CheckedState) => void) & ((checked: CheckedState) => void))`	-	Callback when the checked state changes
`radius`	Optional	`"small" \| "none" \| "medium" \| "large" \| "full"`	`"none"`	Border radius variant
`size`	Optional	`"sm" \| "md" \| "lg" \| "xs"`	`"md"`	Size variant of the checkbox

Prop	Status	Type / Options	Default	Description
`currencies`	Required	`(string \| CurrencyItem)[]`	-	List of currency options
`onChange`	Required	`(currency: string) => void`	-	Fired with the selected currency value when a button is clicked
`value`	Required	`string`	-	Currently selected currency value
`className`	Optional	`string`	-	Additional class for the root element

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

Show steps

On this page