Styling the Appearance of Forms
You can style the appearance of the native KendoReact forms and apply the styling options to React projects.
Basic Usage
The following example demonstrates the default options for styling the forms in action.
Basic and Inline Forms
To get the width of its elements stretched to 100%, use the k-form
class against a <form>
element. To make its label
and input
elements render on the same row, use the k-form-inline
class against a <form>
element. To add a space after the separate sections in a form, use the k-form-field
class.
Required Fields and Field Information
The KendoReact forms provide styling options for rendering additional information to the user. For example, if the field input is required or optional.
To add additional information about the field, use the k-field-info
class. To highlight that the user input is mandatory, use the k-required
class. Use the classes together to describe the field and highlight its description.
Form Elements
The KendoReact themes provide styles for the following form elements:
Button
The <button>
and <a>
HTML elements can be styled with the k-button
class to look like KendoReact buttons, without using the Button
react component. To apply primary styling, use the k-primary
class.
FieldSet
The <fieldset>
HTML element is styled automatically when used inside a <form>
with the class k-form
or k-form-inline
.
TextBox
To set the color for the border, text, and background, use the k-textbox
class on a regular <input>
element. The class provides the same look and height as the look and height of the KendoReact Inputs, DropDowns, and DateInputs components.
TextArea
To set the color for the border, minimum height, text, and background, use the k-textarea
class on a <textarea>
element. The class provides a similar appearance to match the rest KendoReact components.
CheckBoxes
KendoReact themes provide customized appearance for checkboxes through the k-checkbox
class. The styles rely that the <input>
element is immediately followed by a <label>
element with the k-checkbox-label
class.
RadioButtons
KendoReact themes provide customized appearance for checkboxes through the k-radio
class. The styles rely that the <input>
element is immediately followed by a <label>
element with the k-radio-label
class.