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