Form components

Form components handle user input and form submission. All components are built with accessibility in mind and support keyboard navigation.

Prerequisites

Before using these components, complete the @mdk/core installation and add the dependency.

`Button`

Configurable button with multiple variants, sizes, and loading state.

Import

import { Button } from '@mdk/core'

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'danger' \| 'tertiary' \| 'link' \| 'icon' \| 'outline' \| 'ghost'`	`'secondary'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	none	Button size
`loading`	`boolean`	`false`	Show loading spinner
`fullWidth`	`boolean`	`false`	Expand to container width
`icon`	`ReactNode`	none	Icon element
`iconPosition`	`'left' \| 'right'`	`'left'`	Icon placement
`disabled`	`boolean`	`false`	Disable interaction

Basic usage

<Button>Default Button</Button>
<Button variant="primary">Primary</Button>
<Button variant="danger">Delete</Button>
<Button variant="outline">Outline</Button>

With icon

<Button icon={<PlusIcon />}>Add Item</Button>
<Button icon={<ArrowRightIcon />} iconPosition="right">
  Continue
</Button>

Loading state

<Button loading>Saving...</Button>
<Button variant="primary" loading disabled>
  Processing
</Button>

Styling

.mdk-button: Root element
.mdk-button--variant-{variant}: Variant modifier
.mdk-button--size-{size}: Size modifier
.mdk-button--full-width: Full width modifier
.mdk-button--loading: Loading state

`Input`

Text input with label support, prefix/suffix, and search variant.

Import

import { Input } from '@mdk/core'

Props

Prop	Type	Default	Description
`label`	`string`	none	Label displayed above input
`variant`	`'default' \| 'search'`	`'default'`	Input variant
`size`	`'default' \| 'medium'`	`'default'`	Input size
`error`	`string`	none	Error message (shows red border)
`prefix`	`ReactNode`	none	Element before input
`suffix`	`ReactNode`	none	Element after input
`wrapperClassName`	`string`	none	Wrapper element class

Basic usage

<Input label="Email" placeholder="Enter email" id="email" />
<Input variant="search" placeholder="Search miners..." />

With prefix/suffix

<Input prefix="$" suffix="USD" placeholder="0.00" />
<Input suffix="°C" placeholder="Temperature" />
<Input prefix={<UserIcon />} placeholder="Username" />

Error state

<Input
  label="MAC Address"
  error="Invalid MAC address format"
  value={mac}
  onChange={(e) => setMac(e.target.value)}
/>

Styling

.mdk-input: Input element
.mdk-input__wrapper: Wrapper container
.mdk-input__wrapper--error: Error state
.mdk-input__label: Label element
.mdk-input__prefix: Prefix element
.mdk-input__suffix: Suffix element
.mdk-input__error: Error message

`Select`

Dropdown select built on Radix UI primitives.

Import

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
} from '@mdk/core'

`SelectTrigger` props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'lg'`	Trigger size
`variant`	`'default' \| 'colored'`	`'default'`	Visual variant
`color`	`string`	none	Custom color for colored variant (hex)

Basic usage

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

With groups

<Select>
  <SelectTrigger size="md">
    <SelectValue placeholder="Select pool" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="us-east">US East</SelectItem>
      <SelectItem value="us-west">US West</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="eu-west">EU West</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Colored variant

<Select>
  <SelectTrigger variant="colored" color="#72F59E">
    <SelectValue placeholder="Status" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="active">Active</SelectItem>
    <SelectItem value="inactive">Inactive</SelectItem>
  </SelectContent>
</Select>

Styling

.mdk-select__trigger: Trigger button
.mdk-select__trigger--{size}: Size modifier
.mdk-select__trigger--colored: Colored variant
.mdk-select__content: Dropdown content
.mdk-select__item: Option item

`Checkbox`

Checkbox input built on Radix UI primitives.

Import

import { Checkbox } from '@mdk/core'

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Checkbox size
`color`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error'`	`'primary'`	Color when checked
`radius`	`'none' \| 'small' \| 'medium' \| 'large' \| 'full'`	`'none'`	Border radius
`checked`	`boolean \| 'indeterminate'`	none	Checked state (controlled)
`onCheckedChange`	`function`	none	Change callback

Basic usage

<Checkbox checked={checked} onCheckedChange={setChecked} />

<label className="flex items-center gap-2">
  <Checkbox checked={terms} onCheckedChange={setTerms} />
  I agree to the terms
</label>

Sizes and colors

<Checkbox size="xs" />
<Checkbox size="sm" />
<Checkbox size="md" />
<Checkbox size="lg" color="success" />

Styling

.mdk-checkbox: Root element
.mdk-checkbox--{size}: Size modifier
.mdk-checkbox--{color}: Color modifier
.mdk-checkbox__indicator: Check mark container

`Switch`

Toggle switch for on/off states.

Import

import { Switch } from '@mdk/core'

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Switch size
`color`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error'`	`'default'`	Color when checked
`radius`	`'none' \| 'small' \| 'medium' \| 'large' \| 'full'`	`'none'`	Border radius
`checked`	`boolean`	none	Checked state (controlled)
`onCheckedChange`	`function`	none	Change callback

Basic usage

<Switch checked={enabled} onCheckedChange={setEnabled} />

<label className="flex items-center gap-2">
  <Switch checked={darkMode} onCheckedChange={setDarkMode} />
  Dark Mode
</label>

Sizes and colors

<Switch size="sm" />
<Switch size="md" color="primary" />
<Switch size="lg" color="success" />

Styling

.mdk-switch: Root element
.mdk-switch--{size}: Size modifier
.mdk-switch--{color}: Color modifier
.mdk-switch__thumb: Toggle thumb

Additional form components

Component	Description
`Textarea`	Multi-line text input
`Radio`	Radio button group
`DatePicker`	Date selection input
`TagInput`	Tag/chip input field
`Cascader`	Cascading selection
`Label`	Form label component

Form system

The package includes a complete form system built on react-hook-form.

Import

import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  useFormField,
} from '@mdk/core'

Pre-built form fields

import {
  FormInput,
  FormTextArea,
  FormSelect,
  FormCheckbox,
  FormSwitch,
  FormRadioGroup,
  FormDatePicker,
} from '@mdk/core'

Basic usage

import { useForm } from 'react-hook-form'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@mdk/core'

function MyForm() {
  const form = useForm({
    defaultValues: { email: '' },
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="email@example.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

Built-in validators

import { validators, loginSchema, registerSchema } from '@mdk/core'

Form components

On this page