New to Kendo UI for jQuery? Download free 30-day trial

CheckBox Appearance

The CheckBox allows you to set different styles to the input element.

Options

The Kendo UI CheckBox supports the following styling options:

  • size—Configures the overall size of the rendered checkbox.
  • rounded—Configures the border radius applied to the rendered input element.

Size

The size option controls how big or small the rendered CheckBox looks. The structure of the applied class is k-checkbox-{size}.

The available size values are:

  • small
  • medium (Default)
  • large

The example below shows a basic configuration and how to set the size to "small".

    <input id="checkbox" />
    <script>
        $("#checkbox").kendoCheckBox({
            size: "small"
        });
    </script>

Rounded

The rounded option controls how much border radius is applied to the rendered input element. The available rounded values are:

  • small—Renders a checkbox with small border radius.
  • medium (default)—Renders a checkbox with medium border radius.
  • large—Renders a checkbox with large border radius.
  • full—Renders a checkbox with circular shape.

The following example demonstrates how the rounded option can be set to full:

    <input id="checkbox"/>

    <script>
        $(document).ready(function(){
            $("#checkbox").kendoCheckBox({
                rounded: 'full'
            });
        });
    </script>

See Also

In this article