Forms / Styling
material theme

Styling the Appearance of Forms

You can style the appearance of the native Kendo UI forms and apply the styling options to React projects.

Basic Usage

The following example demonstrates the default options for styling the forms in action.

class App extends React.Component {
    render(){
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form">
                                <fieldset>
                                    <legend>User Details</legend>

                                    <label className="k-form-field">
                                        <span>First Name</span>
                                        <input className="k-textbox" placeholder="Your Name" />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Last Name</span>
                                        <input className="k-textbox" placeholder="Your Last Name" />
                                    </label>
                                    <div className="k-form-field">
                                        <span>Gender</span>

                                        <input type="radio" name="gender" id="female" className="k-radio" />
                                        <label className="k-radio-label" for="female">Female</label>

                                        <input type="radio" name="gender" id="male" className="k-radio" checked="checked" />
                                        <label className="k-radio-label" for="male">Male</label>
                                    </div>
                                    <label className="k-form-field">
                                        <span>Email <span className="k-required">*</span></span>
                                        <input type="email" className="k-textbox" placeholder="Your Email" />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Company<span className="k-field-info">optional</span></span>
                                        <input className="k-textbox" placeholder="Your Company" />
                                    </label>
                                </fieldset>

                                <fieldset>
                                    <legend>Credentials</legend>
                                    <label className="k-form-field">
                                        <span>Username</span>
                                        <input className="k-textbox" placeholder="Your username" />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Password</span>
                                        <input type="password" className="k-textbox" placeholder="Your password"/>
                                    </label>
                                    <label className="k-form-field">
                                        <input type="checkbox" id="auth-2fa" className="k-checkbox" />
                                        <label className="k-checkbox-label" for="auth-2fa">Enable two-factor authentication</label>
                                    </label>
                                </fieldset>

                                <div className="text-right">
                                <button type="button" className="k-button">Cancel</button> &nbsp;
                                <button type="button" className="k-button k-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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.

class App extends React.Component {
    render(){
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>.k-form</p>
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form">
                                <label className="k-form-field">
                                    <span>First Name</span>
                                    <input className="k-textbox" placeholder="Your Name" />
                                </label>
                                <label className="k-form-field">
                                    <span>Last Name</span>
                                    <input className="k-textbox" placeholder="Your Last Name" />
                                </label>
                            </form>
                        </div>
                    </div>
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>.k-form-inline</p>
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form-inline">
                                <label className="k-form-field">
                                    <span>First Name</span>
                                    <input className="k-textbox" placeholder="Your Name" />
                                </label>
                                <label className="k-form-field">
                                    <span>Last Name</span>
                                    <input className="k-textbox" placeholder="Your Last Name" />
                                </label>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Required Fields and Field Information

The Kendo UI 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.

class App extends React.Component {
    render(){
        return (
            <form className="k-form">
                <label className="k-form-field">
                    <span>
                    Required field <span className="k-required">*</span>
                    </span>
                    <input className="k-textbox" placeholder="Your Name" />
                </label>

                <label className="k-form-field">
                    <span>
                    Field info<span className="k-field-info">optional</span>
                    </span>
                    <input className="k-textbox" placeholder="Your Company" />
                </label>

                <label className="k-form-field">
                    <span>
                    Required field with field info<span className="k-field-info k-required">required</span>
                    </span>
                    <input className="k-textbox" placeholder="Your PIN" />
                </label>
            </form>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Form Elements

The Kendo UI 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 Kendo UI buttons, without using the Button react component. To apply primary styling, use the k-primary class.

class App extends React.Component {
    render(){
        return (
            <div>
                <button className="k-button">Regular button</button>
                <br />
                <button className="k-button k-primary">Primary button</button>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

FieldSet

The <fieldset> HTML element is styled automatically when used inside a <form> with the class k-form or k-form-inline.

class App extends React.Component {
    render(){
        return (
            <form className="k-form">
                <fieldset>
                    <legend>User Details</legend>

                    <label className="k-form-field">
                        <span>First Name</span>
                        <input className="k-textbox" placeholder="Your Name" />
                    </label>
                    <label className="k-form-field">
                        <span>Last Name</span>
                        <input className="k-textbox" placeholder="Your Last Name" />
                    </label>
                </fieldset>
            </form>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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.

class App extends React.Component {
    render(){
        return (
            <input className="k-textbox" placeholder="Example text..."/>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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.

class App extends React.Component {
    render(){
        return (
            <textarea className="k-textarea">
            Lorem Ipsum is simply dummy text.
            </textarea>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

CheckBoxes

Kendo UI 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.

class App extends React.Component {
    render(){
        return (
            <form className="k-form">
                <div className="k-form-field">
                    <input type="checkbox" id="ch1" className="k-checkbox" />
                    <label className="k-checkbox-label" for="ch1">Checkbox 1</label>

                    <input type="checkbox" id="ch2" className="k-checkbox" checked disabled />
                    <label className="k-checkbox-label" for="ch2">Checkbox 2</label>

                    <input type="checkbox" id="ch3" className="k-checkbox" />
                    <label className="k-checkbox-label" for="ch3">Checkbox 3</label>
                </div>
            </form>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

RadioButtons

Kendo UI 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.

class App extends React.Component {
    render(){
        return (
            <form className="k-form">
                <div className="k-form-field">
                <input type="radio" name="group" id="radio1" className="k-radio" />
                <label className="k-radio-label" for="radio1">RadioButton 1</label>

                <input type="radio" name="group" id="radio2" className="k-radio" disabled />
                <label className="k-radio-label" for="radio2">RadioButton 2</label>

                <input type="radio" name="group" className="k-radio" id="radio3" />
                <label className="k-radio-label" for="radio3">RadioButton 3</label>
                </div>
            </form>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /