Prebuilt form fields

Form-bound fields pre-wired to React hook form. Each combines FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage so you can render a labelled, validated field from a single component.

For raw inputs without form binding, see Controls. To assemble a custom field from the building blocks, see Composition.

Prerequisites

Complete the @mdk/core installation and add the dependency
Wrap your form in <Form> and pass form.control to each field

Components

Component	Description
`FormCascader`	React hook form `Cascader` wrapper for hierarchical selection
`FormCheckbox`	React hook form `Checkbox` wrapper with inline label
`FormDatePicker`	React hook form `DatePicker` wrapper with label and description
`FormInput`	React hook form `Input` wrapper with label, description, and error
`FormRadioGroup`	React hook form `RadioGroup` wrapper accepting an options array
`FormSelect`	React hook form `Select` wrapper accepting an options array
`FormSwitch`	React hook form `Switch` wrapper with inline label
`FormTagInput`	React hook form `TagInput` wrapper for multi-value fields
`FormTextArea`	React hook form `TextArea` wrapper with label, description, and error

Common props

Every prebuilt field accepts the Controller props from React hook form (control, name, defaultValue, rules, shouldUnregister, disabled) plus three presentation props:

Prop	Type	Default	Description
`label`	`string`	none	Label displayed above the field
`description`	`string`	none	Helper text below the field
`placeholder`	`string`	none	Placeholder text (ignored by `FormCheckbox` and `FormSwitch`)

Component-specific props are listed under each field below.

`FormCascader`

Prebuilt Cascader field bound to React hook form for hierarchical single- or multi-level selection values.

Import

import { FormCascader } from '@mdk/core'

Props

Prop	Type	Default	Description
`options`	`CascaderOption[]`	required	Hierarchical options tree
`multiple`	`boolean`	`false`	Allow multiple selection
`cascaderProps`	`object`	none	Pass-through props for the underlying `Cascader`

Basic usage

<FormCascader
  control={form.control}
  name="category"
  label="Category"
  placeholder="Select category..."
  options={[
    {
      value: 'electronics',
      label: 'Electronics',
      children: [
        { value: 'phones', label: 'Phones' },
        { value: 'laptops', label: 'Laptops' },
      ],
    },
  ]}
  description="Choose a category and subcategory"
/>

Multiple selection

<FormCascader
  control={form.control}
  name="categories"
  label="Categories"
  placeholder="Select categories..."
  options={categoryOptions}
  multiple
  description="Select multiple categories"
/>

`FormCheckbox`

Prebuilt Checkbox field bound to React hook form. Renders the checkbox inline with its label and handles boolean value binding.

Import

import { FormCheckbox } from '@mdk/core'

Props

Prop	Type	Default	Description
`layout`	`'row' \| 'column'`	`'row'`	Whether the label sits inline with the checkbox or above it
`checkboxProps`	`object`	none	Pass-through props for the underlying `Checkbox`

Basic usage

<FormCheckbox
  control={form.control}
  name="terms"
  label="Accept terms and conditions"
  description="You must agree to continue"
/>

`FormDatePicker`

Prebuilt DatePicker field bound to React hook form. Handles Date value binding and error display.

Import

import { FormDatePicker } from '@mdk/core'

Props

Prop	Type	Default	Description
`datePickerProps`	`object`	none	Pass-through props for the underlying `DatePicker` (excluding `selected` and `onSelect`, which are bound to the form)

Basic usage

<FormDatePicker
  control={form.control}
  name="startDate"
  label="Start Date"
  placeholder="Pick a date"
  description="When should this take effect?"
/>

`FormInput`

Prebuilt Input field bound to React hook form. Combines FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage into a single component to remove boilerplate.

Import

import { FormInput } from '@mdk/core'

Props

Prop	Type	Default	Description
`type`	`'text' \| 'email' \| 'password' \| 'number' \| ...`	`'text'`	HTML input type
`variant`	`'default' \| 'search'`	`'default'`	Input variant
`inputProps`	`object`	none	Pass-through props for the underlying `Input` (excluding `type` and `variant`)

Basic usage

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

`FormRadioGroup`

Prebuilt RadioGroup field bound to React hook form. Accepts a typed options array and renders the group of radios with labels.

Import

import { FormRadioGroup } from '@mdk/core'

Props

Prop	Type	Default	Description
`options`	`FormRadioOption[]`	required	Array of `{ value, label, disabled? }` items
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	Radio layout direction
`radioGroupProps`	`object`	none	Pass-through props for the underlying `RadioGroup`

Basic usage

<FormRadioGroup
  control={form.control}
  name="priority"
  label="Priority"
  options={[
    { value: 'low', label: 'Low' },
    { value: 'medium', label: 'Medium' },
    { value: 'high', label: 'High' },
  ]}
  orientation="horizontal"
/>

`FormSelect`

Prebuilt Select field bound to React hook form. Accepts a typed options array and renders the trigger, content, and items automatically.

Import

import { FormSelect } from '@mdk/core'

Props

Prop	Type	Default	Description
`options`	`FormSelectOption[]`	required	Array of `{ value, label, disabled? }` items
`selectProps`	`object`	none	Pass-through props for the underlying `Select` (excluding `onValueChange` and `defaultValue`, which are bound to the form)

Basic usage

<FormSelect
  control={form.control}
  name="role"
  label="Role"
  placeholder="Select a role"
  options={[
    { value: 'admin', label: 'Admin' },
    { value: 'user', label: 'User' },
  ]}
  description="Your access level"
/>

`FormSwitch`

Prebuilt Switch field bound to React hook form for on/off form values.

Import

import { FormSwitch } from '@mdk/core'

Props

Prop	Type	Default	Description
`layout`	`'row' \| 'column'`	`'row'`	Whether the label sits inline with the switch or above it
`switchProps`	`object`	none	Pass-through props for the underlying `Switch` (excluding `checked` and `onCheckedChange`)

Basic usage

<FormSwitch
  control={form.control}
  name="notifications"
  label="Enable notifications"
  description="Receive alerts when miners go offline"
/>

`FormTagInput`

Prebuilt TagInput field bound to React hook form for array-valued form fields.

Import

import { FormTagInput } from '@mdk/core'

Props

Prop	Type	Default	Description
`options`	`TagInputOption[]`	none	Suggested tags offered as autocomplete options
`allowCustomTags`	`boolean`	`true`	Let users type tags not present in `options`
`variant`	`'default' \| 'search'`	`'search'`	Visual variant
`tagInputProps`	`object`	none	Pass-through props for the underlying `TagInput`

Basic usage

<FormTagInput
  control={form.control}
  name="tags"
  label="Tags"
  placeholder="Add tags..."
  options={['React', 'TypeScript', 'Node.js']}
  description="Select or type tags"
/>

`FormTextArea`

Prebuilt TextArea field bound to React hook form. Removes the boilerplate of wiring FormField/FormItem/FormLabel/FormControl/FormMessage for multi-line inputs.

Import

import { FormTextArea } from '@mdk/core'

Props

Prop	Type	Default	Description
`textAreaProps`	`object`	none	Pass-through props for the underlying `TextArea`

Basic usage

<FormTextArea
  control={form.control}
  name="bio"
  label="Bio"
  placeholder="Tell us about yourself"
  description="Max 200 characters"
/>

Prebuilt form fields

On this page