cov-kendo-form-components

cov-kendo-form-components

COV Kendo Form Component library. Helps COV developers use Kendo components in a consistent way with built-in validation, accessibility, and required-field styling.

Install

npm install --save cov-kendo-form-components

Peer Dependencies

This library requires the following packages to be installed in your project:

npm install --save react react-dom \
  @progress/kendo-react-dateinputs \
  @progress/kendo-react-dropdowns \
  @progress/kendo-react-form \
  @progress/kendo-react-inputs \
  @progress/kendo-react-labels

Available Components

Component	Kendo Component	Description
FormInput	Input	Standard text input
FormNumericTextBox	NumericTextBox	Numeric-only input with formatting
FormMaskedTextBox	MaskedTextBox	Input with a mask pattern (e.g. phone, SSN)
FormTextArea	TextArea	Multi-line text input with optional character limit
FormCheckbox	Checkbox	Single checkbox
FormSwitch	Switch	Toggle switch
FormRadioButton	RadioButton	Single radio button
FormRadioGroup	RadioGroup	Group of radio buttons
FormDropDownList	DropDownList	Single-select dropdown
FormComboBox	ComboBox	Searchable single-select dropdown
FormAutoComplete	AutoComplete	Auto-complete text input
FormMultiSelect	MultiSelect	Multi-select dropdown
FormDatePicker	DatePicker	Date picker (default format: dd-MMM-yyyy)
FormDateInput	DateInput	Date input field (default format: dd-MMM-yyyy)
FormDateTimePicker	DateTimePicker	Date and time picker (default format: yyyy-MM-dd hh:mm:ss a)
FormTimePicker	TimePicker	Time picker (default format: hh:mm:ss a)
FormDateRangePicker	DateRangePicker	Start/end date range picker

Common Props

All components support these props via the Kendo Field component:

Prop	Type	Description
id	string	Element ID
name	string	Field name (maps to form data)
label	string	Label text
hint	string	Hint text shown below the field
disabled	boolean	Disables the field
optional	boolean	When false, marks the field as required with a cov-required CSS class. Defaults to undefined (treated as optional)
validator	function	Validation function
fieldWrapperClassName	string	CSS class for the FieldWrapper container
onBlurCustom	function	Additional blur handler (called alongside the form's built-in blur tracking)
onFocusCustom	function	Additional focus handler (called alongside the form's built-in focus tracking)

Usage

FormInput & FormCheckbox

import React from "react";
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { FormInput, FormCheckbox } from "cov-kendo-form-components";

function ApplicationForm(props) {
  return (
    <Form
      initialValues={props.initialValues}
      render={(formRenderProps) => (
        <FormElement className="row">
          <fieldset className={"k-form-fieldset col-xl-4 col-md-8 col-sm-12"}>
            <legend className={"k-form-legend"}>{props.title}</legend>

            <Field id={"id"} name={"id"} label={"ID"} component={FormInput} className="form-control small" disabled />
            <Field
              id={"displayName"}
              name={"displayName"}
              label={"Display Name"}
              component={FormInput}
              validator={requiredFieldValidator("Display Name")}
              className="form-control large"
              hint={"e.g. this is a hint"}
            />
            <Field id={"isActive"} name={"isActive"} label={"Active"} component={FormCheckbox} />
          </fieldset>
        </FormElement>
      )}
    />
  );
}

FormTextArea (with character limit)

import { FormTextArea } from "cov-kendo-form-components";

<Field
  id={"notes"}
  name={"notes"}
  label={"Notes"}
  component={FormTextArea}
  optional={false}
  charLimit={500}
  hint={"Provide additional details"}
/>;

FormNumericTextBox

import { FormNumericTextBox } from "cov-kendo-form-components";

<Field id={"amount"} name={"amount"} label={"Amount"} component={FormNumericTextBox} optional={false} format={"c2"} min={0} />;

FormMaskedTextBox

import { FormMaskedTextBox } from "cov-kendo-form-components";

<Field
  id={"phone"}
  name={"phone"}
  label={"Phone Number"}
  component={FormMaskedTextBox}
  mask={"(000) 000-0000"}
  optional={false}
/>;

FormDropDownList

Accepts data as an array or as an object via dataAsObject (keys are converted to an array automatically).

import { FormDropDownList } from "cov-kendo-form-components";

<Field
  id={"status"}
  name={"status"}
  label={"Status"}
  component={FormDropDownList}
  data={["Active", "Inactive", "Pending"]}
  optional={false}
/>;

FormComboBox

import { FormComboBox } from "cov-kendo-form-components";

<Field
  id={"department"}
  name={"department"}
  label={"Department"}
  component={FormComboBox}
  dataAsObject={departments}
  dataItemKey={"id"}
  textField={"name"}
  optional={false}
/>;

FormAutoComplete

import { FormAutoComplete } from "cov-kendo-form-components";

<Field id={"city"} name={"city"} label={"City"} component={FormAutoComplete} data={["New York", "Los Angeles", "Chicago"]} />;

FormMultiSelect

import { FormMultiSelect } from "cov-kendo-form-components";

<Field id={"tags"} name={"tags"} label={"Tags"} component={FormMultiSelect} data={["Urgent", "Review", "Follow-up"]} />;

FormRadioGroup

Accepts data as an array or as an object via dataAsObject.

import { FormRadioGroup } from "cov-kendo-form-components";

<Field
  id={"priority"}
  name={"priority"}
  label={"Priority"}
  component={FormRadioGroup}
  data={[
    { label: "High", value: "high" },
    { label: "Medium", value: "medium" },
    { label: "Low", value: "low" }
  ]}
  optional={false}
/>;

FormSwitch

import { FormSwitch } from "cov-kendo-form-components";

<Field id={"notifications"} name={"notifications"} label={"Enable Notifications"} component={FormSwitch} />;

FormDatePicker

import { FormDatePicker } from "cov-kendo-form-components";

<Field
  id={"startDate"}
  name={"startDate"}
  label={"Start Date"}
  component={FormDatePicker}
  optional={false}
  format={"dd-MMM-yyyy"}
/>;

FormDateTimePicker

import { FormDateTimePicker } from "cov-kendo-form-components";

<Field
  id={"appointmentTime"}
  name={"appointmentTime"}
  label={"Appointment"}
  component={FormDateTimePicker}
  format={"yyyy-MM-dd hh:mm:ss a"}
/>;

FormTimePicker

import { FormTimePicker } from "cov-kendo-form-components";

<Field id={"meetingTime"} name={"meetingTime"} label={"Meeting Time"} component={FormTimePicker} format={"hh:mm:ss a"} />;

FormDateRangePicker

import { FormDateRangePicker } from "cov-kendo-form-components";

<Field id={"dateRange"} name={"dateRange"} label={"Date Range"} component={FormDateRangePicker} />;

FormDateInput

import { FormDateInput } from "cov-kendo-form-components";

<Field id={"birthDate"} name={"birthDate"} label={"Birth Date"} component={FormDateInput} format={"dd-MMM-yyyy"} />;

Required Field Behavior

By default, fields are treated as optional. To mark a field as required:

• Set optional={false} on the Field component. This adds the cov-required CSS class to the label.
• Add a validator prop to enforce the validation rule.

A screen-reader-only "Required field" <span> is automatically rendered for accessibility.

Custom Blur & Focus Handlers

Several components support onBlurCustom and onFocusCustom props. These allow you to run additional logic on blur/focus while preserving the form's internal touched-state tracking.

<Field
  id={"email"}
  name={"email"}
  label={"Email"}
  component={FormInput}
  onBlurCustom={(e) => console.log("Field blurred", e)}
  onFocusCustom={(e) => console.log("Field focused", e)}
/>

License

MIT covnpmjs