Form

Type-safe React Hook Form components integrated seamlessly with shadcn/ui primitives.

Overview

The komdes form components are powerful abstractions over shadcn/ui form primitives. They eliminate boilerplate while maintaining full type safety through rigorous TypeScript generics. This suite includes FormInput, FormInputGroup, FormRadioGroup, and FormSwitch.

Import

import { FormInput, FormInputGroup, FormSwitch, FormRadioGroup } from "komdes";

FormInput

FormInput is the standard text input element.

Prop

Type

FormInputGroup

FormInputGroup renders an input equipped with an optional right-side addon (text, currency, unit, or icon).

Prop

Type

Addon Examples

Text Addon:

<FormInputGroup
  control={form.control}
  name="price"
  addon="USD"
  inputGroupProps={{ type: "number" }}
/>

Compound Addon:

<FormInputGroup
  control={form.control}
  name="short_url"
  addon={
    <>
      <GlobeIcon className="w-4 h-4 mr-2" /> ifx.li/
    </>
  }
/>

FormRadioGroup

FormRadioGroup renders selectable options as clickable cards. It natively supports as const arrays and custom rendering.

Prop

Type

`RadioOption` Type

Prop

Type

Custom Render Slot

Override the default card using renderOption:

<FormRadioGroup
  control={form.control}
  name="gateway"
  options={GATEWAYS}
  renderOption={(opt, isSelected) => (
    <div
      className={cn("p-4 border rounded-lg", isSelected && "border-primary")}
    >
      {opt.label}
    </div>
  )}
/>

FormSwitch

FormSwitch is a toggle switch supporting two structural layouts.

Prop

Type

Layout Variants

Default Layout: (Stacked)

<FormSwitch
  control={form.control}
  name="notifications"
  label="Enable notifications"
/>

Inline Layout: (Card-like row)

<FormSwitch
  control={form.control}
  name="is_shortened"
  label="Shorten URL"
  description="Automatically create a short link"
  layout="inline"
/>

Form

On this page