CINXE.COM

<!doctype html> <html id="html" lang="en"> <head> <meta charset="utf-8" /><script type="text/html" id="sf-tracking-consent-manager"> <div id="tracking-consent-dialog" style="display:none" /> </script><script type="text/javascript" src="/WebResource.axd?d=DzHrpQl5URXarFHAtrmzFpt6hpdYvmVwc29NQZNtMGYSoltUbAFJEjMHfeT-tzVeK6OZukCFlV6BUAzSF-hYBiteasUOhQP_tGcrTDu8m-w3KCOWNLkTXCR0J5idbgmxGzpR0EpgjCZ5_eBWd3lCL6thd1nxNHa5rJpeKjowO8ZlICp89mZWQ717VGriGsdw0&t=638412637900000000"> </script> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="/favicon.ico?v=rebv1" /> <link href="https://dtzbdy9anri2p.cloudfront.net/cache/91b40e2cc1d5506bdfd826fe1430e0432d41c6e4/telerik/css/style.css" rel="stylesheet" type="text/css"> <title> Angular FormField Component | Kendo UI for Angular </title> <style type="text/css" media="all">.u-bt1{border-top:1px solid rgba(255,255,255,.4)}.vs-label{color:#bc8af3}.item-wrapper video,.item-wrapper img{max-height:550px}.item-wrapper strong{font-weight:400 !important}.ContentMain li li{margin-left:20px;list-style-type:disc}.ContentMain span[style*="font-size"]{font-size:inherit !important}.Section--SidebarVibe video{width:auto}</style><meta property="og:title" content="Angular FormField Component | Kendo UI for Angular" /><meta property="og:description" content="The Kendo UI for Angular FormField component assists with following best practices around building forms within Angular applications." /><meta property="og:type" content="website" /><meta property="og:url" content="https://www.telerik.com/kendo-angular-ui/formfield" /><meta property="og:site_name" content="Telerik.com" /><style type="text/css" media="all">html body .tlrk{line-height:1.25}.sf_cols{width:100%}</style><meta name="twitter:title" content="Angular FormField Component | Kendo UI for Angular" /><meta name="twitter:description" content="The Kendo UI for Angular FormField component assists with following best practices around building forms within Angular applications." /><meta name="twitter:url" content="https://www.telerik.com/kendo-angular-ui/formfield" /><meta property="og:image" content="https://www.telerik.com/sfimages/default-source/logos/telerik1200x630.png" /><meta name="twitter:image" content="https://www.telerik.com/sfimages/default-source/logos/telerik1200x630.png" /><meta property="fb:app_id" content="472070859628573" /><meta name="twitter:site" content="@Telerik" /><meta name="twitter:creator" content="@Telerik" /><meta name="twitter:card" content="summary_large_image" /><script type="application/json" id="sf-insight-metadata"> {"contentMetadata":"{\"Id\":\"b24573ff-7d94-4898-8325-b87ce235e327\",\"ContentType\":\"ProductItem\",\"Title\":\"FormField\",\"CanonicalTitle\":\"FormField\",\"DefaultLanguage\":\"en\",\"CreatedOn\":\"2020-12-08T03:58:10.187Z\",\"ModifiedOn\":\"2023-06-07T11:55:49.24Z\",\"SiteName\":\"TelerikCom\",\"ModuleName\":\"Products\",\"ContentPath\":{\"Id\":\"5893d734-ccd9-4993-9cfd-14d72dd1580a\",\"Title\":\"Kendo UI for Angular\",\"Type\":\"ProductInfo\"},\"Hierarchies\":[{\"Id\":\"09eb93c1-1154-4870-8849-aa4863b0555c\",\"Title\":\"Inputs\",\"Parent\":{\"Id\":\"6eb62cfb-7f16-485e-9015-de3c43d051a3\",\"Title\":\"Product pages, Body section\",\"Parent\":{\"Id\":\"511225f0-da54-46f9-9aae-218e6d078e75\",\"Title\":\"Product Categories\",\"Parent\":{\"Id\":\"b92c08fc-5112-640e-a4c7-ff0100821d28\",\"Title\":\"Telerik Universal Taxonomy\"}}}},{\"Id\":\"5e85ea05-3ae3-482d-b929-a1fb94ec53e9\",\"Title\":\"Kendo UI for Angular\",\"Parent\":{\"Id\":\"20ce8493-e2c1-4625-8f09-a2a99b6a96d9\",\"Title\":\"Products Taxonomy\"}}],\"PageHierarchies\":[{\"Id\":\"5e85ea05-3ae3-482d-b929-a1fb94ec53e9\",\"Title\":\"Kendo UI for Angular\",\"Parent\":{\"Id\":\"20ce8493-e2c1-4625-8f09-a2a99b6a96d9\",\"Title\":\"Products Taxonomy\"}}],\"SFDataProviderName\":\"OpenAccessProvider\",\"PageId\":\"d670be97-5951-456b-9785-5407f9e4ef33\",\"PageTitle\":\"Components\",\"PageCanonicalTitle\":\"Components\"}","videosMetadata":"[]"} </script><script type="application/json" id="sf-insight-settings"> {"apiServerUrl":"https://api.insight.sitefinity.com","apiKey":"76766c2b-82f4-2453-81e5-fd840f3b455b","applicationName":"TelerikCom","trackingCookieDomain":".telerik.com","keepDecTrackingCookieOnTrackingConsentRejection":false,"slidingExpirationForTrackingCookie":false,"maxAgeForTrackingCookieInDays":365,"trackYouTubeVideos":true,"crossDomainTrackingEntries":["store.progress.com","www.telerik.com"],"strategy":"Persist|False","docsHrefTestExpressions":[".*\\/docs\\/.+\\.{1}.+((\\?|\\\u0026)sfvrsn=.+){1}$",".+((\\?|\\\u0026)sf_dm_key=.+){1}$"]} </script><script type="text/javascript" src="/WebResource.axd?d=HtQyXelCu6mzSPcVcvK_BnBLuTvfT4YnhIxMh-5HvNKgqByRIHbbXoW-WLawts4Fh-UeZCJ3U3bxoGXTa9IeTV0YgoErORFnWeFm4Ee4GKMjgFOUUaD27X8_kP6MXFbUOYCXuGSyPJKcRpIAXeuKlNLzK7M8ff_SiSbDuCJrAGc7qHYMaATrTTzCQGFPIhXxUg-JFb_e0_0l8itIi7oyj_QLiEUjvHa-WpKcceSkwp41&t=638412637900000000"> </script><script src="https://cdn.insight.sitefinity.com/sdk/sitefinity-insight-client.min.3.1.13.js" crossorigin="" async="async"> </script><meta name="description" content="The Kendo UI for Angular FormField component assists with following best practices around building forms within Angular applications." /></head> <body id="telerik" class="telerik"> <script src='https://d6vtbcy3ong79.cloudfront.net/external-assets/1.0.27/utils/store-lead-data.min.js' type="text/plain" class="optanon-category-2"></script> <script defer async type="module" id="mjs-promotion-1"> const cdn = "https://d6vtbcy3ong79.cloudfront.net"; const id = "promotion-1"; const response = await fetch(`/webapi/Announcements/GetPromo?url=${window.location.href}`, { method: "GET", cache: "no-cache", }); const json = await response.json(); const model = json?.content; if (model) { let version = model.scriptVersion || "stable"; let stylesheet = cdn + "/sticky-notification/" + version + "/style.min.css"; let javascript = cdn + "/sticky-notification/" + version + "/index.min.mjs"; let cookieName = "promotion-" + model.id.replace("-", ""); let imageUrl = model.image || "https://d585tldpucybw.cloudfront.net/sfimages/default-source/ninjas/sticky-notification-illustration.svg"; let campaignName = model.campaignName || model.title; let html = model.htmlRawContent; let button = `<div><a class='tsn__cta-button' href='${model.ctaUrl}'>${model.ctaText}</a></div>`; if (model.ctaText && model.ctaUrl) { html += button; } function track(eventType) { try { if (!OptanonActiveGroups) { return; } } catch (e) { return; } if (!OptanonActiveGroups.includes("2")) { return; } window.dataLayer = window.dataLayer || []; let banner = document.querySelector(`.tsn--${id}`); let bannerType = "Right Side Banner"; let bannerTopic = campaignName; let bannerExpandEventName = "Popup Banner Expand"; let bannerCollapseEventName = "Popup Banner Collapse"; let bannerImpressionEventName = "Popup Banner Impression"; let bannerCtaClickEventName = "Popup Banner CTA Click"; let bannerExpandedState = "expanded"; let bannerCollapsedState = "collapsed"; if (eventType === "impression") { dataLayer.push({ event: bannerImpressionEventName, state: banner.classList.contains("tsn--is-expanded") ? bannerExpandedState : bannerCollapsedState, type: bannerType, promoting: bannerTopic }); } if (eventType === "expand") { dataLayer.push({ event: bannerExpandEventName, type: bannerType, promoting: bannerTopic }); } if (eventType === "collapse") { dataLayer.push({ event: bannerCollapseEventName, type: bannerType, promoting: bannerTopic }); } if (eventType === "cta-click") { dataLayer.push({ event: bannerCtaClickEventName, type: bannerType, promoting: bannerTopic, ctaLandingPage: window.location.href }); } } async function importStyles(stylesheetUrl) { return new Promise((resolve, reject) => { const link = document.createElement("link"); link.id = `css-${id}`; link.rel = "stylesheet"; link.type = "text/css"; link.href = stylesheetUrl; link.addEventListener("load", resolve); link.addEventListener("error", reject); document.body.append(link); }); } async function initPromotion() { const [{ StickyNotification }] = await Promise.all([ import(javascript), importStyles(stylesheet), ]); StickyNotification.create({ autoShow: true, autoExpand: true, autoCollapse: false, label: model.label, title: model.title, content: html, image: imageUrl, imageAlt: model.imageAltText, useImageAsBanner: model.useImageAsHero, useAltExpandButton: false, useAuth: model.isPersonalized, useCookie: true, cookieName: cookieName, modifierClass: `tsn--${id}`, onReady: () => track("impression"), onCtaClick: () => track("cta-click"), onManualExpand: () => track("expand"), onManualCollapse: () => track("collapse"), }); } requestAnimationFrame(initPromotion); } </script> <link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/css/metric.min.css" as="style" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Light.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Medium.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Regular.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/metric/Metric-Semibold.woff2" as="font" crossorigin="anonymous" media="(min-width: 621px)"><link rel="preload" href="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.63/css/index.min.css" as="style"><style id="js-tlrk-nav-inline-styles">.TK-Nav--Loading,.TK-Nav--Loading *{box-sizing:border-box}.TK-Nav--Loading{overflow:hidden;background:#fff;font-family:Metric}.TK-Nav--Loading>.TK-Bar{overflow:hidden;background:#fff}.TK-Nav--Loading .TK-container{max-width:1230px;margin:0 auto;padding:0 30px}.TK-Nav--Loading .TK-TLRK-Brand{margin:0}.TK-Nav--Loading .TK-Dropdown,.TK-Nav--Loading .TK-Nav-Overlay,.TK-Nav--Loading .TK-Print{display:none}.TK-Nav--Loading .TK-Context-Menu,.TK-Nav--Loading .TK-Products-Menu-Item-Button{visibility:hidden}@media only screen and (min-width:1240px){.TK-Nav--Loading,.TK-Nav--Loading>.TK-Bar{height:60px}}@media only screen and (max-width:1239px){.TK-Nav--Loading,.TK-Nav--Loading>.TK-Bar{height:45px}}@media only screen and (max-width:1229px){.TK-Nav--Loading .TK-container{padding:0 20px}}</style><link rel="stylesheet" type="text/css" href="https://d6vtbcy3ong79.cloudfront.net/fonts/2.2.7/css/metric.min.css" id="js-tlrk-nav-metric" class="is-loading" onload="this.classList.remove('is-loading')" onerror="this.classList.remove('is-loading')"><link rel="stylesheet" type="text/css" href="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.63/css/index.min.css" id="js-tlrk-nav-styles" class="is-loading" onload="this.classList.remove('is-loading')" onerror="this.classList.remove('is-loading')"><nav id="js-tlrk-nav" class="TK-Nav TK-Nav--Shadow TK-Nav--Loading" data-tlrk-nav-version="3.5.63" data-tlrk-nav-template="nav-kendo-ui-angular-csa-rel-component"><section class="TK-Bar"><div class="TK-container TK-Bar-container"><figure class="TK-TLRK-Brand"><a href="#skip-to-content" id="js-tlrk-skip-link" class="TK-Skip-Link">skip navigation</a> <a href="/" class="TK-TLRK-Logo" aria-label="Go to Homepage"><svg xmlns="http://www.w3.org/2000/svg" width="18px" height="60" viewBox="0 0 49 60.3"><path fill="#5ce500" d="M11.2 14.9L0 21.3l17.4 10.1v20.1l11.2-6.4c.5-.3.9-1 .9-1.6V24.4L13 14.9c-.5-.3-1.3-.3-1.8 0z"/><path fill="#5ce500" d="M12.1 48.4V34.5L0 41.5zM25 .2c-.5-.3-1.3-.3-1.8 0L10.7 7.4l24.1 13.9v27.9L47.3 42c.5-.3.9-1 .9-1.6V13.6L25 .2z"/></svg></a></figure><ul class="TK-Products-Menu"><li class="TK-Products-Menu-Item TK-Static"><button type="button" class="TK-Products-Menu-Item-Button" aria-label="Product Navigation">Kendo UI for Angular <i class="TK-Arrow"></i></button><div id="js-tlrk-nav-dash" class="TK-Dash TK-Dropdown TK-Dropdown--Full TK-Dropdown--White TK-Dropdown---Mobile"><div class="TK-container"><div class="TK-row"><div class="TK-col-6"><div class="TK-Bundles TK-BG"><p class="TK-Dash-Title">Product Bundles</p><a href="/devcraft" class="TK-Bundle" data-match-exact-path><div class="TK-Bundle-Icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70" width="75" height="61"><path d="M70 35c0 5.3-1.2 10.3-3.2 14.7-4.8 10.4-14.6 18-26.4 19.8-1.8.4-3.6.5-5.4.5-2.6 0-5.1-.3-7.5-.8-6.9-1.5-13.1-5.1-17.8-10C7.1 56.5 5 53.4 3.4 50c-.4-.8-.7-1.5-1-2.3C.8 43.7 0 39.5 0 35 0 15.7 15.7 0 35 0s35 15.7 35 35z" fill-rule="evenodd" clip-rule="evenodd" fill="#a3d8f1"/><path d="M40.9 65.6l-.5 4c-1.8.3-3.6.4-5.4.4-2.6 0-5.1-.3-7.5-.8-6.9-1.5-13.1-5.1-17.8-10C7.1 56.5 5 53.4 3.4 50c3.2-4.4 8.2-7.5 14-8.3 1-.1 1.9-.2 2.9-.2.6 0 1.1 0 1.7.1 4.7.4 8.9 2.3 12.2 5.2 3 2.7 5.3 6.2 6.3 10.1.7 2.7.9 5.7.4 8.7z" fill-rule="evenodd" clip-rule="evenodd" fill="#e26841"/><path d="M17.3 48.5L32 61.3l13.2-7-10-8c-1.4-1.1-2.3-2.9-2.3-4.7v-9H17.3v15.9z" fill="#31475c" fill-rule="evenodd" clip-rule="evenodd"/><path d="M21.9 32.6v15.9l-2.3 2-9.9 8.7C7.1 56.5 5 53.4 3.4 50c-.4-.8-.7-1.5-1-2.3L4 46.3c1.4-1.1 2.3-2.9 2.3-4.7v-9h15.6z" fill="#31475c" fill-rule="evenodd" clip-rule="evenodd"/><defs><filter id="tlrk-nav-a" filterUnits="userSpaceOnUse" x="28.1" y=".3" width="31.2" height="17.4"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="28.1" y=".3" width="31.2" height="17.4" id="tlrk-nav-b"><g filter="url(#tlrk-nav-a)"><path d="M25.7 10.8l32.5-11L61.4 9 28.8 20z" fill="#fff" fill-rule="evenodd" clip-rule="evenodd"/></g></mask><path d="M28.1 17.8l9.1-8.4c2-1.9 4.9-2.3 7.4-1 3 1.5 6.6.5 8.4-2.3L56.6.4 59.3 3l-5.1 7.2c-1.9 2.7-5.6 3.5-8.5 1.9l-1.1-.6c-2.1-1.2-4.6-1.1-6.7.2l-9.8 6.1z" mask="url(#tlrk-nav-b)" fill-rule="evenodd" clip-rule="evenodd" fill="#e26841"/><path d="M62.8 13.7l-8 6.2a6.61 6.61 0 01-8.2 0l-3.2-2.5c-1.4-1.1-3.2-1.6-5-1.3l-10.2 1.5 10.1-3.7c1.9-.7 4.1-.5 5.8.6l2.5 1.6c2.5 1.5 5.7 1.3 7.9-.6l5.6-4.8 2.7 3z" fill-rule="evenodd" clip-rule="evenodd" fill="#e26841"/><path d="M27 11.6h-5.5c-8.4 0-15.3 6.8-15.3 15.3v15.6c0 3.4 2.7 6.1 6.1 6.1H27c3.4 0 6.1-2.7 6.1-6.1V17.7c0-3.4-2.8-6.1-6.1-6.1" fill-rule="evenodd" clip-rule="evenodd" fill="#14254c"/><path d="M31.7 32.2c0 6.7-5.4 12.1-12.1 12.1S7.5 38.8 7.5 32.2s5.4-12.1 12.1-12.1 12.1 5.4 12.1 12.1" fill="#31475c" fill-rule="evenodd" clip-rule="evenodd"/><defs><filter id="tlrk-nav-c" filterUnits="userSpaceOnUse" x="9.1" y="15.8" width="21.1" height="34"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="9.1" y="15.8" width="21.1" height="34" id="tlrk-nav-d"><g filter="url(#tlrk-nav-c)"><path d="M7.5 32.2c0 6.7 5.4 12.1 12.1 12.1 6.7 0 12.1-5.4 12.1-12.1 0-6.7-5.4-12.1-12.1-12.1-6.7 0-12.1 5.4-12.1 12.1z" fill="#fff" fill-rule="evenodd" clip-rule="evenodd"/></g></mask><path d="M9.1 48.1V26.3c0-5.8 4.7-10.5 10.5-10.5s10.5 4.7 10.5 10.5v23.5l-21-1.7z" mask="url(#tlrk-nav-d)" fill-rule="evenodd" clip-rule="evenodd" fill="#e9ac6a"/><path d="M14.6 35.1h5.5v-9.5z" fill="#dc7f1b" fill-rule="evenodd" clip-rule="evenodd"/><path d="M20.3 39.3c1.3.1 2.7-.2 4-1 1.1-.6 1.8-1.5 2.3-2.3l-1-.6c-.4.7-1.1 1.4-1.9 1.9-1.1.7-2.3.9-3.3.8l-.1 1.2z" fill="#fff"/><path d="M27.4 27.6h-2.3c0-.6.5-1.1 1.1-1.1h.2c.5 0 1 .5 1 1.1m-13.5 0h-2.3c0-.6.5-1.1 1.1-1.1h.2c.6 0 1 .5 1 1.1" fill="#231f20" fill-rule="evenodd" clip-rule="evenodd"/><path d="M7.5 24.7h25.1v-1.2H7.5zm0 5.5h25.1V29H7.5zm0 11h23.6v-1.3H7.5zm0-5.5h25.1v-1.3H7.5z" fill="#14254c"/><path d="M66.8 49.7c-4.8 10.4-14.6 18-26.4 19.8-1.8.4-3.6.5-5.4.5-2.6 0-5.1-.3-7.5-.8l-.4-2.8c-.5-3.1-.3-6.2.4-9 1.1-4.2 3.4-7.9 6.5-10.7.2-.2.5-.5.8-.7 3.8-3.2 8.7-5.1 14.2-5.1 7.3 0 13.7 3.5 17.8 8.8z" fill-rule="evenodd" clip-rule="evenodd"/><g fill-rule="evenodd" clip-rule="evenodd"><path d="M56.503 26.65c5.8-3 11.9-4.7 16.4-2.3 2.5 1.4 3.1 3.3 5.4 4 3 .9 7.5-.8 14.8-9.4l4.1 4.4c-10.7 10.6-16.4 11.8-19.7 10.4-2.6-1-3.2-3.4-6.7-5.5-4.8-2.7-10.3-2.4-14.3-1.6" fill="#8174f2"/><path d="M58.003 26.05c2.9-7.4 9.8-11.7 16-10.9 4.9.7 7.9 4.3 8.7 5.5-1.6.9-3.2 1.9-4.8 2.8-1.2-1-3-2.2-5.4-2.8-7.6-1.8-14 4.9-14.5 5.4" fill="#8174f2"/><path d="M37.103 44.85l-2-13.4c0-7.4 6.1-13.4 13.5-13.4s13.5 6 13.5 13.4l-1.7 13.4c-.8 5.8-5.8 10.1-11.6 10.1s-10.8-4.3-11.7-10.1z" fill="#00264b"/><path d="M34.803 34.25h27.5v-5.8h-27.5z" fill="#8174f2"/><path d="M57.003 38.05h-16.5c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3h16.5c1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3" fill="#e9ac6a"/><path d="M39.203 35.05c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1m11 .1c0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1" fill="#00264b"/><path d="M46.403 38.05h2.9v-5.5z" fill="#dc7f1b"/></g></svg></div><p class="TK-Bundle-Title TK-Best-Value">DevCraft</p><p class="TK-Bundle-Description">All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:</p><ul class="TK-Bundle-list"><li><strong>NEW</strong>: Design Kits for Figma</li><li>Online Training</li><li>Document Processing Library</li><li>Embedded Reporting for web and desktop</li></ul></a></div></div><div class="TK-col-18"><div class="TK-row"><div class="TK-col-8"><p class="TK-Dash-Title">Web</p><div class="TK-Dash-Links"><a href="/kendo-ui" class="TK-Dash-Link" data-match-exact-path>Kendo UI</a> <a href="/kendo-jquery-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for jQuery</a> <a href="/kendo-angular-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for Angular</a> <a href="/kendo-react-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for React</a> <a href="/kendo-vue-ui" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>UI for Vue</a> <a href="/blazor-ui" class="TK-Dash-Link" data-match-exact-path>UI for Blazor</a> <a href="/aspnet-core-ui" class="TK-Dash-Link" data-match-exact-path>UI for ASP.NET Core</a> <a href="/aspnet-mvc" class="TK-Dash-Link" data-match-exact-path>UI for ASP.NET MVC</a> <a href="/products/aspnet-ajax.aspx" class="TK-Dash-Link" data-match-exact-path>UI for ASP.NET AJAX</a></div><p class="TK-Dash-Title">Mobile</p><div class="TK-Dash-Links"><a href="/maui-ui" class="TK-Dash-Link" data-match-exact-path>UI for .NET MAUI</a></div><p class="TK-Dash-Title">Document Management</p><div class="TK-Dash-Links"><a href="/document-processing-libraries" class="TK-Dash-Link" data-match-exact-path>Telerik Document Processing</a></div></div><div class="TK-col-8"><p class="TK-Dash-Title">Desktop</p><div class="TK-Dash-Links"><a href="/maui-ui" class="TK-Dash-Link" data-match-exact-path>UI for .NET MAUI</a> <a href="/winui" class="TK-Dash-Link" data-match-exact-path>UI for WinUI</a> <a href="/products/winforms.aspx" class="TK-Dash-Link" data-match-exact-path>UI for WinForms</a> <a href="/products/wpf/overview.aspx" class="TK-Dash-Link" data-match-exact-path>UI for WPF</a></div><p class="TK-Dash-Title">Reporting</p><div class="TK-Dash-Links"><a href="/products/reporting.aspx" class="TK-Dash-Link" data-match-exact-path>Telerik Reporting</a> <a href="/report-server" class="TK-Dash-Link" data-match-exact-path>Telerik Report Server</a></div><p class="TK-Dash-Title">Testing & Mocking</p><div class="TK-Dash-Links"><a href="/teststudio" class="TK-Dash-Link" data-match-exact-path>Test Studio</a> <a href="/teststudio-dev" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>Test Studio Dev Edition</a> <a href="/products/mocking.aspx" class="TK-Dash-Link" data-match-exact-path>Telerik JustMock</a></div><p class="TK-Dash-Title">CMS</p><div class="TK-Dash-Links"><a href="https://www.progress.com/sitefinity-cms" class="TK-Dash-Link" data-match-exact-path>Sitefinity</a></div></div><div class="TK-col-8"><p class="TK-Dash-Title">UI/UX Tools</p><div class="TK-Dash-Links"><a href="/themebuilder" class="TK-Dash-Link TK-Updated" data-match-exact-path>ThemeBuilder</a> <a href="/design-system" class="TK-Dash-Link" data-match-exact-path>Design System Kit</a> <a href="/page-templates-and-ui-blocks" class="TK-Dash-Link" data-match-exact-path>Templates and Building Blocks</a></div><p class="TK-Dash-Title">Debugging</p><div class="TK-Dash-Links"><a href="/fiddler" class="TK-Dash-Link" data-match-exact-path>Fiddler</a> <a href="/fiddler/fiddler-everywhere" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>Fiddler Everywhere</a> <a href="/fiddler/fiddler-classic" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>Fiddler Classic</a> <a href="/fiddler/fiddler-everywhere-reporter" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>Fiddler Everywhere Reporter</a> <a href="/fiddlercore" class="TK-Dash-Link TK-Dash-Link--Indented" data-match-exact-path>FiddlerCore</a></div><p class="TK-Dash-Title"></p><div class="TK-Dash-Links"></div><p class="TK-Dash-Title">Free Tools</p><div class="TK-Dash-Links"><a href="https://converter.telerik.com" class="TK-Dash-Link">VB.NET to C# Converter</a> <a href="/teststudio/testing-framework" class="TK-Dash-Link" data-match-exact-path>Testing Framework</a></div></div></div><div class="TK-Dash-Footer"><a href="/all-products" class="TK-Dash-Featured-Link" data-match-exact-path>View all products</a></div></div></div></div></div><div class="TK-Dash-Extension TK--Mobile"></div></li></ul><div class="TK-Drawer" id="js-tlrk-nav-drawer"><ul class="TK-Context-Menu TK-Menu"><li class="TK-Menu-Item"><a href="/kendo-angular-ui" class="TK-Menu-Item-Link" data-match-exact-path>Overview</a></li><li class="TK-Menu-Item"><button type="button" class="TK-Menu-Item-Button">Frameworks <i class="TK-Arrow"></i></button><ul class="TK-Dropdown TK-Dropdown--Gray TK-Dropdown--Full TK-Dropdown--Mobile"><li><a href="/kendo-jquery-ui" class="TK-Dropdown-Link" data-match-exact-path>jQuery</a></li><li><a href="/kendo-angular-ui" class="TK-Dropdown-Link" data-match-exact-path>Angular</a></li><li><a href="/kendo-react-ui" class="TK-Dropdown-Link" data-match-exact-path>React</a></li><li><a href="/kendo-vue-ui" class="TK-Dropdown-Link" data-match-exact-path>Vue</a></li></ul></li><li class="TK-Menu-Item"><a href="/kendo-angular-ui/components/" class="TK-Menu-Item-Link" data-match-starts-with-path>Docs & Demos</a></li><li class="TK-Menu-Item"><a href="/kendo-angular-ui/components/getting-started" class="TK-Menu-Item-Link" data-match-exact-path>Get Started</a></li><li class="TK-Menu-Item TK-Menu-Item--static"><button type="button" class="TK-Menu-Item-Button">Resources <i class="TK-Arrow"></i></button><div class="TK-Dropdown TK-Dropdown--Double TK-Dropdown--Mobile TK-Dropdown--East TK-Dropdown--3XL"><div class="TK-container"><div class="TK-row"><div class="TK-col-9"><p class="TK-Dash-Title">Support and Learning</p><ul class="TK-Dropdown-List"><li><a href="/support/kendo-ui-for-angular" class="TK-Dropdown-List-Link" data-match-exact-path>Support and Learning Hub</a></li><li><a href="/kendo-angular-ui/components/getting-started" class="TK-Dropdown-List-Link" data-match-exact-path>First Steps</a></li><li><a href="/kendo-angular-ui/resources" class="TK-Dropdown-List-Link" data-match-exact-path>Angular Tutorials and Learning</a></li><li><a href="https://learn.telerik.com/learn/course/external/view/elearning/55/kendo-ui-for-angular" class="TK-Dropdown-List-Link" data-match-exact-path>Virtual Classroom</a></li><li><a href="/forums/kendo-angular-ui" class="TK-Dropdown-List-Link" data-match-exact-path>Forums</a></li><li><a href="/security-and-accessibility" class="TK-Dropdown-List-Link" data-match-exact-path>Accessibility and Security</a></li><li><a href="/account/support-center" class="TK-Dropdown-List-Link" data-match-exact-path>Submit a Ticket</a></li><li><a href="https://www.progress.com/trust-center/telerik-and-kendo-ui" class="TK-Dropdown-List-Link" target="_blank" data-match-exact-path>Trust Center</a></li><li><a href="/faqs/angular" class="TK-Dropdown-List-Link" data-match-exact-path>FAQs</a></li></ul></div><div class="TK-col-6"><p class="TK-Dash-Title">Resources</p><ul class="TK-Dropdown-List"><li><a href="/kendo-angular-ui/components/" class="TK-Dropdown-List-Link" data-match-exact-path>Docs & Demos</a></li><li><a href="/videos/product/kendo-angular-ui" class="TK-Dropdown-List-Link" data-match-exact-path>Videos</a></li><li><a href="/blogs/web-angular" class="TK-Dropdown-List-Link" data-match-exact-path>Blogs</a></li><li><a href="/support/whats-new/kendo-angular-ui" class="TK-Dropdown-List-Link" data-match-exact-path>What鈥檚 New</a></li><li><a href="/support/whats-new/kendo-angular-ui/roadmap" class="TK-Dropdown-List-Link" data-match-exact-path>Roadmap</a></li><li><a href="/kendo-angular-ui/components/changelogs/kendo-angular-ui/" class="TK-Dropdown-List-Link" data-match-exact-path>Release History</a></li></ul></div><div class="TK-col-9"><p class="TK-Dash-Title">Productivity and Design Tools</p><ul class="TK-Dropdown-List"><li><a href="/themebuilder" class="TK-Dropdown-List-Link" data-match-exact-path>ThemeBuilder</a></li><li><a href="/design-system/docs/" class="TK-Dropdown-List-Link" data-match-exact-path>Design System Documentation</a></li><li><a href="/kendo-angular-ui/components/installation/vscode-extension/" class="TK-Dropdown-List-Link" data-match-exact-path>Visual Studio Code Extensions</a></li><li><a href="/products/reporting.aspx" class="TK-Dropdown-List-Link" data-match-exact-path>Embedded Reporting</a></li></ul></div></div></div></div></li><li class="TK-Menu-Item"><a href="/purchase/kendo-ui" class="TK-Menu-Item-Link" data-match-exact-path>Pricing</a></li></ul><ul class="TK-Aside-Menu TK-Aside-Menu--Max"><li class="TK-Aside-Menu-Item TK-Aside-Menu-Button--Search"><a href="/search" class="TK-Aside-Menu-Link js-tlrk-nav-search-link" title="Search" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 512 512" xml:space="preserve"><path d="M504.4,464L378.9,338.5c25.6-34.8,40.8-77.7,40.8-124.2c0-115.7-94.1-209.8-209.8-209.8C94.2,4.5,0,98.6,0,214.3 C0,330,94.2,424.1,209.9,424.1c50.5,0,96.9-17.9,133.1-47.8l124.5,124.5c5.1,5.1,11.8,7.6,18.4,7.6s13.3-2.5,18.4-7.6 C514.6,490.7,514.6,474.2,504.4,464z M52.2,214.3c0-87,70.7-157.7,157.7-157.7s157.7,70.7,157.7,157.7c0,41-15.7,78.3-41.4,106.4 c-0.3,0.3-0.7,0.6-1,0.9c-0.7,0.7-1.3,1.4-1.9,2.2c-28.7,29.7-68.9,48.2-113.4,48.2C122.9,372,52.2,301.3,52.2,214.3z"></path></svg></a></li><li class="TK-Aside-Menu-Item"><a href="https://store.progress.com/shopping-cart" data-empty-url="/purchase.aspx?filter=web" class="TK-Aside-Menu-Link js-tlrk-nav-shopping-cart-counter-container" aria-label="Shopping cart" title="Shopping cart" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M11.75 14.5a1 1 0 111-1 1 1 0 01-1 1zm-8.25 0a1 1 0 111-1 1 1 0 01-1 1zm8.18-3H4.25A1.752 1.752 0 012.5 9.75v-8a.25.25 0 00-.25-.25H.75a.75.75 0 010-1.5h1.5A1.752 1.752 0 014 1.75v.75h8.78a1.75 1.75 0 011.72 2.093l-1.1 5.5a1.754 1.754 0 01-1.72 1.407zM4 4v5.75a.25.25 0 00.25.25h7.43a.251.251 0 00.245-.2l1.1-5.5a.251.251 0 00-.245-.3z" transform="translate(.75 .75)"/></svg> <span class="TK-Aside-Menu-Link-Text">Shopping cart</span></a></li><li class="TK-Aside-Menu-Item TK--Auth TK-dn" id="js-tlrk-nav-auth-container"><button type="button" class="TK-Aside-Menu-Button"><span class="TK-Avatar"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="{[AvatarUrl]}" alt="Your Avatar" class="TK-Avatar-Media" id="js-tlrk-nav-avatar-image"> </span><span class="TK-Aside-Menu-Button-Text">Your Account <i class="TK-Arrow"></i></span></button><ul class="TK-Dropdown TK-Dropdown--Gray TK-Dropdown--Small TK-Dropdown--Mobile"><li><a href="/account/" class="TK-Dropdown-Link" data-match-exact-path><span>Account Overview</span></a></li><li><a href="/account/your-licenses" class="TK-Dropdown-Link" data-match-starts-with-path><span>Your Licenses</span></a></li><li><a href="/account/downloads" class="TK-Dropdown-Link" data-match-starts-with-path><span>Downloads</span></a></li><li><a href="/account/support-center" class="TK-Dropdown-Link" data-match-starts-with-path><span>Support Center</span></a></li><li><a href="/forums/profile/mine" class="TK-Dropdown-Link" data-match-exact-path><span>Forum Profile</span></a></li><li><a href="/account/payment-methods" class="TK-Dropdown-Link" data-match-starts-with-path><span>Payment Methods</span></a></li><li><a href="/account/profile" class="TK-Dropdown-Link" data-match-exact-path><span>Edit Profile</span></a></li><li><a data-href="{[LogoutUrl]}" class="TK-Dropdown-Link" id="js-tlrk-nav-log-out" rel="nofollow"><span class="TK-Dropdown-Link-Spacer">Log out</span></a></li></ul></li><li class="TK-Aside-Menu-Item TK--Not-Auth" id="js-tlrk-nav-not-auth-container"><a href="/account/" title="Your Account" class="TK-Aside-Menu-Button" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path xmlns="http://www.w3.org/2000/svg" d="M13.75 14.5a.751.751 0 01-.75-.75v-.5a5.75 5.75 0 10-11.5 0v.5a.75.75 0 01-1.5 0v-.5a7.175 7.175 0 011.319-4.159A7.262 7.262 0 014.69 6.476 3.717 3.717 0 013.5 3.75a3.75 3.75 0 117.5 0 3.716 3.716 0 01-1.19 2.726 7.263 7.263 0 013.371 2.615A7.175 7.175 0 0114.5 13.25v.5a.751.751 0 01-.75.75zm-6.5-13A2.25 2.25 0 109.5 3.75 2.253 2.253 0 007.25 1.5z" transform="translate(.75 .75)"/></svg> <span class="TK-Aside-Menu-Button-Text">Login</span></a></li><li class="TK-Aside-Menu-Item TK-bn"><a href="/contact?preselect=ui-for-angular" class="TK-Aside-Menu-Button TK-Button--CTA-Sec" title="Contact Us" data-match-starts-with-path><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M12.75 14.5h-11A1.752 1.752 0 010 12.753v-7.37a.092.092 0 01.005-.026.1.1 0 000-.023.782.782 0 01.01-.093.63.63 0 01.02-.071l.007-.021V5.14a.828.828 0 01.036-.088.673.673 0 01.045-.078.078.078 0 00.009-.02.069.069 0 01.01-.02.1.1 0 01.028-.019.1.1 0 00.019-.015.68.68 0 01.077-.076.124.124 0 00.015-.024.106.106 0 01.019-.016L6.2.354a1.736 1.736 0 012.1 0l5.9 4.431a.1.1 0 01.018.02.118.118 0 00.017.019.591.591 0 01.076.075.109.109 0 00.02.018.1.1 0 01.019.017.077.077 0 01.01.02.088.088 0 00.01.02c.017.026.031.053.045.078a.9.9 0 01.039.1l.007.021a.5.5 0 01.03.164.1.1 0 000 .023.092.092 0 01.005.027v7.37A1.752 1.752 0 0112.75 14.5zM1.5 6.883v5.87a.253.253 0 00.25.247h11a.253.253 0 00.249-.25V6.883L8.3 10.412a1.737 1.737 0 01-2.1 0zM7.25 1.5a.248.248 0 00-.15.053L2 5.383l5.1 3.83a.253.253 0 00.15.052.245.245 0 00.15-.053l5.1-3.829-5.1-3.83a.248.248 0 00-.15-.053z" transform="translate(.75 .75)"/></svg> <span class="TK-Aside-Menu-Button-Text">Contact Us</span></a></li><li class="TK-Aside-Menu-Item TK-bn"><a href="/try/kendo-angular-ui" class="TK-Button TK-Button--CTA">Try now</a></li></ul></div><div class="TK-Drawer-Extension"></div><div class="TK-Aside TK--Mobile"><ul class="TK-Aside-Menu"><li class="TK-Aside-Menu-Item TK-Aside-Menu-Button--Search"><a href="/search" class="TK-Aside-Menu-Link js-tlrk-nav-search-link" title="Search" data-match-exact-path><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="15" height="15" viewBox="0 0 512 512" xml:space="preserve"><path d="M504.4,464L378.9,338.5c25.6-34.8,40.8-77.7,40.8-124.2c0-115.7-94.1-209.8-209.8-209.8C94.2,4.5,0,98.6,0,214.3 C0,330,94.2,424.1,209.9,424.1c50.5,0,96.9-17.9,133.1-47.8l124.5,124.5c5.1,5.1,11.8,7.6,18.4,7.6s13.3-2.5,18.4-7.6 C514.6,490.7,514.6,474.2,504.4,464z M52.2,214.3c0-87,70.7-157.7,157.7-157.7s157.7,70.7,157.7,157.7c0,41-15.7,78.3-41.4,106.4 c-0.3,0.3-0.7,0.6-1,0.9c-0.7,0.7-1.3,1.4-1.9,2.2c-28.7,29.7-68.9,48.2-113.4,48.2C122.9,372,52.2,301.3,52.2,214.3z"></path></svg></a></li><li class="TK-Aside-Menu-Item"><button type="button" aria-label="Main Navigation" class="TK-Aside-Menu-Button TK-Aside-Menu-Button--Toggle-Drawer" id="js-tlrk-nav-drawer-button"><svg id="menu" viewBox="0 0 100 80" class="WUG-Svg WUG-Svg-Hamburger" width="22" height="16"><line x1="10" y1="40" x2="90" y2="40"></line><line x1="10" y1="40" x2="90" y2="40"></line><line x1="10" y1="40" x2="90" y2="40"></line></svg></button></li></ul></div></div></section><button type="button" class="TK-Nav-Overlay" id="js-tlrk-nav-overlay">close mobile menu</button></nav><script async nomodule src="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.63/js/index.min.js"></script><script async type="module" src="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/3.5.63/js/index.min.mjs"></script><div id="ContentPlaceholder1_T53129E6C012_Col00" class="sf_colsIn PageWrapper tlrk" data-sf-element="EmptyWrapper" data-placeholder-label="EmptyWrapper"><script> (function (a, b, c, d) { window.fetch("https://www.g2.com/products/progress-kendo-ui/rating_schema.json") .then(e => e.json()) .then(f => { c = a.createElement(b); c.type = "application/ld+json"; c.text = JSON.stringify(f); d = a.getElementsByTagName(b)[0]; d.parentNode.insertBefore(c, d); }); }) (document, "script"); </script><div class="Section u-bg-blue3" data-sf-element="Section" data-placeholder-label="Section Banner"> <div id="ContentPlaceholder1_C092_Col00" class="sf_colsIn Section-bg" data-sf-element="Section Background" data-placeholder-label="Section Background"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/components-header-bg2f1a98db-5f12-42bf-8e7a-7a29769074f3.svg" alt="background" data-sf-ec-immutable=""/> </div> <div id="ContentPlaceholder1_C092_Col01" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <div class="row row--equal"> <div class="col-12 u-s-mb0"> <p class="u-c-grey8 u-ff-sans1 u-mb2 h3 u-fs36">Kendo UI for Angular</p> <h1 class="u-mb4 u-c-white js-PageTitle"> Angular FormField </h1> </div> <div class="col-6 u-m-col-12 u-dfc u-m-mb2 u-s-mb2"> <ul class="List List--checks List--inside Space--fixed u-mb5 u-fs22 u-a-blue1"> <li>Build theme-conforming forms faster than ever with a form control, label, hint and error messages. </li> <li>Part of the Kendo UI for Angular library along with 110+ professionally-designed components.</li> <li>Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!</li> </ul> <div class="row u-mta"> <div class="col-6"> <a href="https://www.telerik.com/kendo-angular-ui/components/inputs/get-started/" class="Btn Btn--l Btn--prim u-full u-fs24">First Steps</a> </div> <div class="col-6"> <a href="https://www.telerik.com/kendo-angular-ui/components/inputs/formfield/" class="Btn Btn--l Btn--sec u-full u-fs24">Docs & Demos</a> </div> </div> </div> <div class="col-6 u-m-col-12"> <figure class="u-tac"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/js-headers/formfield.jpg?sfvrsn=54871b84_2" alt="FormField" class="component-img" /> </figure> </div> </div></div> </div> <section class="Section Section--SidebarVibe" data-sf-element="Section" data-placeholder-label="Section"> <div class="container"> <div class="row row--equal"> <div id="ContentPlaceholder1_C094_Col00" class="sf_colsIn col-8 ContentMain" data-sf-element="col-8" data-placeholder-label="Content"> <div> <ul class="List Space--stretched u-pt2"> <li> <div class="u-ff-sans item-wrapper"> <h2 id="overview" class="u-mb1">Full-featured Form Field</h2> <div class="u-fs24 u-mb3"><p>The Kendo UI for Angular Form Field component is designed to assist you with following best practices around building forms in Angular applications. The Angular FormField contain a single form control element, a label and hint and error messages, wrapped in one building block of a larger form.</p> <p><a href="https://www.telerik.com/kendo-angular-ui/components/inputs/formfield/" target="_blank">See Angular FormField demo</a>.</p></div> </div> <div class="u-mb5 u-pb1"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/angular/angular-formfield-overview.jpg?sfvrsn=b9578fef_0" alt="Kendo UI for Angular FormField - Overview" class="js-reveal" loading="lazy" /> </div> </li> </ul> </div></div> <div class="col-4"> <div class="SidebarVibeWrapper"> <nav id="ContentPlaceholder1_C094_Col01" class="sf_colsIn SidebarVibe js-sticky-sidebar" data-sf-element="Sidebar Vibe" data-placeholder-label="Sidebar Vibe"> <div class="SidebarVibe-header"> <h4 class="SidebarVibe-h1"> <a href="/kendo-angular-ui">Kendo UI for Angular</a> </h4> <div class="SidebarVibe-CTA"> <a href="https://www.telerik.com/kendo-angular-ui/components/inputs/get-started/" class="Btn Btn--prim u-fs19 u-wsn">First Steps</a> <a href="https://www.telerik.com/kendo-angular-ui/components/inputs/formfield/" class="Btn Btn--sec u-nm u-fs19 u-wsn">Docs & Demos</a> </div> </div> <div class="SidebarVibe-main"> <h4 class="SidebarVibe-h2">FormField</h4> <a id="js-sidebar-arrow-up" href="#scroll-up" class="SidebarVibe-menu-arrow-up"></a> <a id="js-sidebar-arrow-down" href="#scroll-down" class="SidebarVibe-menu-arrow-down"></a> <div id="js-scroll-view" class="SidebarVibe-ScrollView"> <div id="js-scroll-view-pane" class="SidebarVibe-ScrollView-Pane"> <ul id="js-sidebar-menu" class="SidebarVibe-menu" data-tlrk-plugin="navspy" data-navspy-top="30"> <li> <a href="#overview" data-href="#overview" class="sidebar-item">Full-featured Form Field</a> </li> </ul> </div> </div> </div> <div class="SidebarVibe-footer u-pt0 u-pb2"><h4 class="SidebarVibe-h3 u-mb2 js-hide-sidebar-faqs"><a data-sf-ec-immutable="" class="Link js-anchor-scroll" href="#faqs" data-target=".js-sidebar-vibe-stopper">FAQ</a></h4><h4 class="SidebarVibe-h3"><a data-sf-ec-immutable="" class="Link js-anchor-scroll" href="#all-components" data-target="#all-components">All Kendo UI for Angular components</a></h4></div> </nav> </div> </div> </div> </div> </section> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { const sidebarFaqs = document.querySelector(".js-hide-sidebar-faqs"); sidebarFaqs.classList.add("u-dn"); }); </script> <section class="Section u-tint-grey u-pt8 u-pb8 js-sidebar-vibe-stopper" data-sf-element="Section" data-placeholder-label="Section"> <div id="ContentPlaceholder1_C077_Col00" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"> <h2 id="all-components">All Kendo UI for Angular Components</h2> <style> .LabelB { font-weight: 400 !important; } </style> <div class="row u-hyphenate"> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Charts</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/area-chart" class="u-ff-sans u-fs20"> <span>Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bar-chart" class="u-ff-sans u-fs20"> <span>Bar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/box-plot" class="u-ff-sans u-fs20"> <span>Box Plot</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bubble-chart" class="u-ff-sans u-fs20"> <span>Bubble Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bullet-chart" class="u-ff-sans u-fs20"> <span>Bullet Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/chart-wizard" class="u-ff-sans u-fs20"> <span>Chart Wizard</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/charts" class="u-ff-sans u-fs20"> <span>Charts</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/donut-chart" class="u-ff-sans u-fs20"> <span>Donut Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/funnel-chart" class="u-ff-sans u-fs20"> <span>Funnel Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/heatmap" class="u-ff-sans u-fs20"> <span>Heatmap</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/line-chart" class="u-ff-sans u-fs20"> <span>Line Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pie-chart" class="u-ff-sans u-fs20"> <span>Pie Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/polar-chart" class="u-ff-sans u-fs20"> <span>Polar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pyramid-chart" class="u-ff-sans u-fs20"> <span>Pyramid Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/radar-chart" class="u-ff-sans u-fs20"> <span>Radar Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/range-area-chart" class="u-ff-sans u-fs20"> <span>Range Area Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/sankey-diagram" class="u-ff-sans u-fs20"> <span>Sankey Diagram</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/scatter-chart" class="u-ff-sans u-fs20"> <span>Scatter Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/sparkline" class="u-ff-sans u-fs20"> <span>Sparkline</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/waterfall-chart" class="u-ff-sans u-fs20"> <span>Waterfall Chart</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Editor</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/editor" class="u-ff-sans u-fs20"> <span>Rich Text Editor</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">TreeList</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/treelist" class="u-ff-sans u-fs20"> <span>TreeList</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Scheduler</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/gantt-chart" class="u-ff-sans u-fs20"> <span>Gantt Chart</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/scheduler" class="u-ff-sans u-fs20"> <span>Scheduler</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Progress Bars</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/chunkprogressbar" class="u-ff-sans u-fs20"> <span>ChunkProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/circularprogressbar" class="u-ff-sans u-fs20"> <span>CircularProgressBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/progressbar" class="u-ff-sans u-fs20"> <span>Progress Bar</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Buttons</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/button" class="u-ff-sans u-fs20"> <span>Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/buttongroup" class="u-ff-sans u-fs20"> <span>ButtonGroup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/chip" class="u-ff-sans u-fs20"> <span>Chip</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/chiplist" class="u-ff-sans u-fs20"> <span>ChipList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dropdownbutton" class="u-ff-sans u-fs20"> <span>DropdownButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/floatingactionbutton" class="u-ff-sans u-fs20"> <span>Floating Action Button</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/splitbutton" class="u-ff-sans u-fs20"> <span>SplitButton</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Common Features</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/data-query" class="u-ff-sans u-fs20"> <span>Data Query</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/date-math" class="u-ff-sans u-fs20"> <span>Date Math</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/drag-and-drop" class="u-ff-sans u-fs20"> <span>Drag-and-Drop</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/drawing" class="u-ff-sans u-fs20"> <span>Drawing</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/excel-export" class="u-ff-sans u-fs20"> <span>Excel Export</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pdf-export" class="u-ff-sans u-fs20"> <span>PDF Export</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pdfviewer" class="u-ff-sans u-fs20"> <span>PDFViewer</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Conversational UI</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/aiprompt" class="u-ff-sans u-fs20"> <span>AIPrompt</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/conversational-ui" class="u-ff-sans u-fs20"> <span>Conversational UI</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Indicators</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/badge" class="u-ff-sans u-fs20"> <span>Badge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/loader" class="u-ff-sans u-fs20"> <span>Loader</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/skeleton" class="u-ff-sans u-fs20"> <span>Skeleton</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Diagrams and Maps</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/map-(beta)" class="u-ff-sans u-fs20"> <span>Map</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Date Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/calendar" class="u-ff-sans u-fs20"> <span>Calendar</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dateinput" class="u-ff-sans u-fs20"> <span>DateInput</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/datepicker" class="u-ff-sans u-fs20"> <span>DatePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/daterange" class="u-ff-sans u-fs20"> <span>DateRange</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/datetimepicker" class="u-ff-sans u-fs20"> <span>DateTimePicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multiviewcalendar" class="u-ff-sans u-fs20"> <span>MultiViewCalendar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/timepicker" class="u-ff-sans u-fs20"> <span>TimePicker</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dialogs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/dialog" class="u-ff-sans u-fs20"> <span>Dialog</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/window" class="u-ff-sans u-fs20"> <span>Window</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Labels</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/floating-label" class="u-ff-sans u-fs20"> <span>FloatingLabel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/label" class="u-ff-sans u-fs20"> <span>Label</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Icons</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/icon" class="u-ff-sans u-fs20"> <span>Icon</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/svgicon" class="u-ff-sans u-fs20"> <span>SVGIcon</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Design</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/typography" class="u-ff-sans u-fs20"> <span>Typography</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Navigation</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/actionsheet" class="u-ff-sans u-fs20"> <span>ActionSheet</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/appbar" class="u-ff-sans u-fs20"> <span>AppBar (NavBar)</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/bottomnavigation" class="u-ff-sans u-fs20"> <span>BottomNavigation</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/breadcrumb" class="u-ff-sans u-fs20"> <span>BreadCrumb</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/drawer" class="u-ff-sans u-fs20"> <span>Drawer</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Dropdowns</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/autocomplete" class="u-ff-sans u-fs20"> <span>AutoComplete</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/combobox" class="u-ff-sans u-fs20"> <span>ComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dropdownlist" class="u-ff-sans u-fs20"> <span>DropDownList</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/dropdowntree" class="u-ff-sans u-fs20"> <span>DropDownTree</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multicolumncombobox" class="u-ff-sans u-fs20"> <span>MultiColumnComboBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multiselect" class="u-ff-sans u-fs20"> <span>MultiSelect</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/multiselecttree" class="u-ff-sans u-fs20"> <span>MultiSelectTree</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Gauges</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/arcgauge" class="u-ff-sans u-fs20"> <span>ArcGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/circulargauge" class="u-ff-sans u-fs20"> <span>CircularGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/lineargauge" class="u-ff-sans u-fs20"> <span>LinearGauge</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/radialgauge" class="u-ff-sans u-fs20"> <span>RadialGauge</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Grids</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/grid" class="u-ff-sans u-fs20"> <span>Grid</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pivotgrid" class="u-ff-sans u-fs20"> <span>PivotGrid</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/spreadsheet" class="u-ff-sans u-fs20"> <span>Spreadsheet</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Upload</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/file-saver" class="u-ff-sans u-fs20"> <span>File Saver</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/fileselect" class="u-ff-sans u-fs20"> <span>File Select</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/upload" class="u-ff-sans u-fs20"> <span>Upload</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Inputs</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/checkbox" class="u-ff-sans u-fs20"> <span>Checkbox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/colorgradient" class="u-ff-sans u-fs20"> <span>ColorGradient</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/colorpalette" class="u-ff-sans u-fs20"> <span>ColorPalette</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/colorpicker" class="u-ff-sans u-fs20"> <span>ColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/flatcolorpicker" class="u-ff-sans u-fs20"> <span>FlatColorPicker</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/formfield" class="u-ff-sans u-fs20"> <span>FormField</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/maskedtextbox" class="u-ff-sans u-fs20"> <span>MaskedTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/numerictextbox" class="u-ff-sans u-fs20"> <span>NumericTextBox</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/radiobutton" class="u-ff-sans u-fs20"> <span>RadioButton</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/rangeslider" class="u-ff-sans u-fs20"> <span>RangeSlider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/rating" class="u-ff-sans u-fs20"> <span>Rating</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/signature" class="u-ff-sans u-fs20"> <span>Signature</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/slider" class="u-ff-sans u-fs20"> <span>Slider</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/switch" class="u-ff-sans u-fs20"> <span>Switch</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/textarea" class="u-ff-sans u-fs20"> <span>TextArea</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/textbox" class="u-ff-sans u-fs20"> <span>TextBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/treeview" class="u-ff-sans u-fs20"> <span>TreeView</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Bar & QR Codes</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/barcode" class="u-ff-sans u-fs20"> <span>Barcode Generator</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/qr-code" class="u-ff-sans u-fs20"> <span>QR Code</span> </a> </li> </ul> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Data Tools</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/filter" class="u-ff-sans u-fs20"> <span>Filter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/pager" class="u-ff-sans u-fs20"> <span>Pager</span> </a> </li> </ul> </div> <div class="col-2"> <h3 class="u-ff-sans u-fw5 u-fs17 u-ttu">Layout</h3> <ul class="List List--links-4 u-mb4"> <li> <a href="https://www.telerik.com/kendo-angular-ui/avatar" class="u-ff-sans u-fs20"> <span>Avatar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/card" class="u-ff-sans u-fs20"> <span>Card</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/contextmenu" class="u-ff-sans u-fs20"> <span>ContextMenu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/expansionpanel" class="u-ff-sans u-fs20"> <span>ExpansionPanel</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/gridlayout" class="u-ff-sans u-fs20"> <span>GridLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/hint" class="u-ff-sans u-fs20"> <span>Hint</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/listbox" class="u-ff-sans u-fs20"> <span>ListBox</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/listview" class="u-ff-sans u-fs20"> <span>ListView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/menu" class="u-ff-sans u-fs20"> <span>Menu</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/notification" class="u-ff-sans u-fs20"> <span>Notification</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/panelbar" class="u-ff-sans u-fs20"> <span>PanelBar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/popover" class="u-ff-sans u-fs20"> <span>Popover</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/popup" class="u-ff-sans u-fs20"> <span>Popup</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/ripple" class="u-ff-sans u-fs20"> <span>Ripple</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/scrollview" class="u-ff-sans u-fs20"> <span>ScrollView</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/sortable" class="u-ff-sans u-fs20"> <span>Sortable</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/splitter" class="u-ff-sans u-fs20"> <span>Splitter</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/stacklayout" class="u-ff-sans u-fs20"> <span>Stacklayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/stepper" class="u-ff-sans u-fs20"> <span>Stepper</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/tabstrip" class="u-ff-sans u-fs20"> <span>TabStrip</span> <span class="LabelB u-bg-yellow u-c-blue2 u-fs13" aria-label="Updated">Updated</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/tilelayout" class="u-ff-sans u-fs20"> <span>TileLayout</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/timeline" class="u-ff-sans u-fs20"> <span>Timeline</span> <span class="LabelB u-bg-green u-c-blue2 u-fs13" aria-label="New">New</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/toolbar" class="u-ff-sans u-fs20"> <span>Toolbar</span> </a> </li> <li> <a href="https://www.telerik.com/kendo-angular-ui/tooltip" class="u-ff-sans u-fs20"> <span>Tooltip</span> </a> </li> </ul> </div> </div> </div> </section> <div class="Section u-bg-blue4 u-pt1 u-pb1" data-sf-element="Section" data-placeholder-label="Section Banner"> <div id="ContentPlaceholder1_C096_Col00" class="sf_colsIn Section-bg Section-bg--nw" data-sf-element="Section Background" data-placeholder-label="Section Background"> <img loading="lazy" src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/decorations/get-started-waves.svg?sfvrsn=f770ce3b_2" alt="Next Steps" /> </div> <div id="ContentPlaceholder1_C096_Col01" class="sf_colsIn container" data-sf-element="Section Content" data-placeholder-label="Section Content"><div class="row" data-sf-element="Row"> <div id="ContentPlaceholder1_C098_Col00" class="sf_colsIn col-8 u-l-full" data-sf-element="Column 1" data-placeholder-label="Column 1"> <h2 class="u-c-white u-mt7 u-mb7">Get Started with Kendo UI for Angular</h2> <div class="row u-mb4"> <div class="col-6"> <a href="https://www.telerik.com/kendo-angular-ui/components/inputs/get-started/" class="Btn Btn--l Btn--prim u-db u-full u-fs24">First Steps</a> </div> <div class="col-6"> <a href="https://www.telerik.com/kendo-angular-ui/components/inputs/formfield/" class="Btn Btn--l Btn--sec u-db u-full u-fs24">Docs & Demos</a> </div> </div> </div> <div id="ContentPlaceholder1_C098_Col01" class="sf_colsIn col-4 u-l-full u-tar u-l-tac u-m-dn" data-sf-element="Column 2" data-placeholder-label="Column 2"> <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/2020-revamp/angular-kendoka-bottom.png?sfvrsn=86e11234_2" loading="lazy" alt="Kendo UI for Angular - Kendoka" /></div> </div> </div> </div> </div> <footer class="TK-Footer" data-tlrk-nav-version="3.5.63" data-tlrk-nav-template="footer-big-rel-markup"><div class="TK-container"><div class="TK-row TK-No-Print"><div class="TK-col-8 TK--Footer-Desktop"><div class="TK-Footer-Featured-Item"><div class="TK-Footer-H">Complete .NET Toolbox</div><a href="/devcraft" class="TK-Footer-Featured-Link" data-sf-ec-immutable="">Telerik DevCraft</a> </div><div class="TK-Footer-Featured-Item"><div class="TK-Footer-H">Complete JavaScript Toolbox</div><a href="/kendo-ui" class="TK-Footer-Featured-Link" data-sf-ec-immutable="">Kendo UI</a> </div></div><div class="TK-col-16"><div class="TK-row"><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Get Products</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/download" class="TK-Footer-Link" data-sf-ec-immutable="">Free Trials</a></li><li class="TK-Footer-List-Item"><a href="/purchase.aspx" class="TK-Footer-Link" data-sf-ec-immutable="">Pricing</a></li></ul></div><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Resources</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/support/demos" class="TK-Footer-Link" data-sf-ec-immutable="">Demos</a></li><li class="TK-Footer-List-Item"><a href="/documentation" class="TK-Footer-Link" data-sf-ec-immutable="">Documentation</a></li><li class="TK-Footer-List-Item"><a href="/support/whats-new/release-history" class="TK-Footer-Link" data-sf-ec-immutable="">Release History</a></li><li class="TK-Footer-List-Item"><a href="/forums" class="TK-Footer-Link" data-sf-ec-immutable="">Forums</a></li><li class="TK-Footer-List-Item"><a href="/blogs" class="TK-Footer-Link" data-sf-ec-immutable="">Blogs</a></li><li class="TK-Footer-List-Item"><a href="/webinars" class="TK-Footer-Link" data-sf-ec-immutable="">Webinars</a></li><li class="TK-Footer-List-Item"><a href="/videos" class="TK-Footer-Link" data-sf-ec-immutable="">Videos</a></li><li class="TK-Footer-List-Item"><a href="/services" class="TK-Footer-Link" data-sf-ec-immutable="">Professional Services</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/partners/partner-locator?Products=KendoUI+and+Telerik" class="TK-Footer-Link" data-sf-ec-immutable="">Partners</a></li><li class="TK-Footer-List-Item"><a href="/support/virtual-classroom" class="TK-Footer-Link" data-sf-ec-immutable="">Video Courses</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/events" class="TK-Footer-Link" data-sf-ec-immutable="">Events</a></li><li class="TK-Footer-List-Item"><a href="/faqs" class="TK-Footer-Link" data-sf-ec-immutable="">FAQs</a></li></ul></div><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Recognition</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/about/success-stories" class="TK-Footer-Link" data-sf-ec-immutable="">Success Stories</a></li><li class="TK-Footer-List-Item"><a href="/about/testimonials" class="TK-Footer-Link" data-sf-ec-immutable="">Testimonials</a></li></ul></div><div class="TK-col-6 TK--Footer-Desktop"><div class="TK-Footer-H TK--Footer-Desktop">Get in touch</div><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/contact" class="TK-Footer-Link" data-sf-ec-immutable="">Contact Us</a></li><li><ul class="TK-Footer-List--inner"><li class="TK-Footer-List-Item"><a href="tel:+18886790442" class="TK-Footer-Phone-Link u-db" data-sf-ec-immutable="">USA: <span class="TK-wsn">+1 888 679 0442</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+441344838186" class="TK-Footer-Phone-Link u-db" data-sf-ec-immutable="">UK: <span class="TK-wsn">+44 13 4483 8186</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+914069019447" class="TK-Footer-Phone-Link u-db" data-sf-ec-immutable="">India: <span class="TK-wsn">+91 406 9019447</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+35928099850" class="TK-Footer-Phone-Link u-db" data-sf-ec-immutable="">Bulgaria: <span class="TK-wsn">+359 2 8099850</span></a></li><li class="TK-Footer-List-Item"><a href="tel:+61370688610" class="TK-Footer-Phone-Link u-db" data-sf-ec-immutable="">Australia: <span class="TK-wsn">+61 3 7068 8610</span></a></li></ul></li><li><ul class="TK-Footer-List--inner TK-Footer-List-Horizontal TK-Footer-List-Social"><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.facebook.com/telerik" title="Facebook" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M16 7h-1.924C13.461 7 13 7.252 13 7.889V9h3l-.238 3H13v8h-3v-8H8V9h2V7.077C10 5.055 11.064 4 13.461 4H16zM5 0a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">165k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://x.com/telerik" title="X" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="#000" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">50k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.linkedin.com/company/telerik" title="LinkedIn" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 19h-3v-5.6c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.4-2.586 7-2.777 7 2.476zM6.5 6.732a1.757 1.757 0 01-1.75-1.764A1.757 1.757 0 016.5 3.2a1.758 1.758 0 011.75 1.764A1.757 1.757 0 016.5 6.728zM5 19h3V8H5zM19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000" fill-rule="evenodd" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">17k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.twitch.tv/codeitlive" title="Twitch" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 23 24.05"><path d="M1.57.02L0 4.18V20.9h5.75v3.12h3.14l3.13-3.14h4.71L23 14.61V.02zm2.09 2.07h17.25v11.5l-3.66 3.66H11.5l-3.13 3.13v-3.13H3.66zm5.75 10.45h2.09V6.27H9.41zm5.75 0h2.09V6.27h-2.09z" fill="#000" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">4k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.youtube.com/c/telerik" title="YouTube" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="18.287" viewBox="0 0 26 18.287"><path fill="#010101" d="M25.74 3.945a5.625 5.625 0 0 0-1.034-2.581 3.718 3.718 0 0 0-2.605-1.1c-3.638-.263-9.1-.263-9.1-.263h-.011s-5.458 0-9.1.263a3.719 3.719 0 0 0-2.605 1.1A5.623 5.623 0 0 0 .26 3.945 39.324 39.324 0 0 0 0 8.154v1.972a39.323 39.323 0 0 0 .26 4.208 5.623 5.623 0 0 0 1.033 2.58 4.408 4.408 0 0 0 2.867 1.112c2.08.2 8.84.261 8.84.261s5.463-.008 9.1-.271a3.719 3.719 0 0 0 2.605-1.1 5.625 5.625 0 0 0 1.035-2.582 39.377 39.377 0 0 0 .26-4.208V8.154a39.377 39.377 0 0 0-.26-4.209Zm-15.388 8.6V5.211l6.974 3.665Z" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">14k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://github.com/telerik" title="GitHub" class="TK-Footer-Social-Link" data-sf-ec-immutable=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,0A12.047,12.047,0,0,0,0,12,12.455,12.455,0,0,0,9.188,24V20.03a2.889,2.889,0,0,1-3.239-1.441c-.273-.46-.756-.959-1.26-.922l-.124-1.4a2.892,2.892,0,0,1,2.593,1.6,1.555,1.555,0,0,0,.9.772,1.89,1.89,0,0,0,1.181-.1,3.3,3.3,0,0,1,.827-1.691h0C6.942,16.382,5.7,14.724,5.2,13.415a5.506,5.506,0,0,1,.855-5.281A.188.188,0,0,0,6.1,7.989a4.6,4.6,0,0,1,.14-3.073,4.858,4.858,0,0,1,2.663,1l.337.2c.141.084.1.036.238.025A10.182,10.182,0,0,1,12,5.792a10.225,10.225,0,0,1,2.553.363l.109.011c-.01,0,.03-.007.1-.046,2.436-1.476,2.349-.993,3-1.206A4.682,4.682,0,0,1,17.9,7.989c-.071.218,2.112,2.217.9,5.426-.494,1.309-1.74,2.968-4.866,3.434h0a3.086,3.086,0,0,1,.879,2.2V24A12.454,12.454,0,0,0,24,12,12.047,12.047,0,0,0,12,0Z"></path></svg></a></li></ul></li></ul></div></div><div class="TK-row TK-row--M2 TK--Footer-Mobile"><div class="TK-col-24"><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="/contact" class="TK-Footer-Link" data-sf-ec-immutable="">Contact Us</a></li><li><ul class="TK-Footer-List--inner TK-Footer-List-Horizontal TK-Footer-List-Social"><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.facebook.com/telerik" title="Facebook" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M16 7h-1.924C13.461 7 13 7.252 13 7.889V9h3l-.238 3H13v8h-3v-8H8V9h2V7.077C10 5.055 11.064 4 13.461 4H16zM5 0a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">165k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://x.com/telerik" title="X" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="#000" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">50k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.linkedin.com/company/telerik" title="LinkedIn" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 19h-3v-5.6c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.4-2.586 7-2.777 7 2.476zM6.5 6.732a1.757 1.757 0 01-1.75-1.764A1.757 1.757 0 016.5 3.2a1.758 1.758 0 011.75 1.764A1.757 1.757 0 016.5 6.728zM5 19h3V8H5zM19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5z" fill="#000" fill-rule="evenodd" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">17k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.twitch.tv/codeitlive" title="Twitch" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 23 24.05"><path d="M1.57.02L0 4.18V20.9h5.75v3.12h3.14l3.13-3.14h4.71L23 14.61V.02zm2.09 2.07h17.25v11.5l-3.66 3.66H11.5l-3.13 3.13v-3.13H3.66zm5.75 10.45h2.09V6.27H9.41zm5.75 0h2.09V6.27h-2.09z" fill="#000" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">4k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://www.youtube.com/c/telerik" title="YouTube" class="TK-Footer-Social-Link"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="18.287" viewBox="0 0 26 18.287"><path fill="#010101" d="M25.74 3.945a5.625 5.625 0 0 0-1.034-2.581 3.718 3.718 0 0 0-2.605-1.1c-3.638-.263-9.1-.263-9.1-.263h-.011s-5.458 0-9.1.263a3.719 3.719 0 0 0-2.605 1.1A5.623 5.623 0 0 0 .26 3.945 39.324 39.324 0 0 0 0 8.154v1.972a39.323 39.323 0 0 0 .26 4.208 5.623 5.623 0 0 0 1.033 2.58 4.408 4.408 0 0 0 2.867 1.112c2.08.2 8.84.261 8.84.261s5.463-.008 9.1-.271a3.719 3.719 0 0 0 2.605-1.1 5.625 5.625 0 0 0 1.035-2.582 39.377 39.377 0 0 0 .26-4.208V8.154a39.377 39.377 0 0 0-.26-4.209Zm-15.388 8.6V5.211l6.974 3.665Z" data-sf-ec-immutable=""></path></svg> <span class="TK-Footer-Social-Link-Count TK-fs16">14k+</span></a></li><li class="TK-Footer-List-Horizontal-Item"><a href="https://github.com/telerik" title="GitHub" class="TK-Footer-Social-Link" data-sf-ec-immutable=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,0A12.047,12.047,0,0,0,0,12,12.455,12.455,0,0,0,9.188,24V20.03a2.889,2.889,0,0,1-3.239-1.441c-.273-.46-.756-.959-1.26-.922l-.124-1.4a2.892,2.892,0,0,1,2.593,1.6,1.555,1.555,0,0,0,.9.772,1.89,1.89,0,0,0,1.181-.1,3.3,3.3,0,0,1,.827-1.691h0C6.942,16.382,5.7,14.724,5.2,13.415a5.506,5.506,0,0,1,.855-5.281A.188.188,0,0,0,6.1,7.989a4.6,4.6,0,0,1,.14-3.073,4.858,4.858,0,0,1,2.663,1l.337.2c.141.084.1.036.238.025A10.182,10.182,0,0,1,12,5.792a10.225,10.225,0,0,1,2.553.363l.109.011c-.01,0,.03-.007.1-.046,2.436-1.476,2.349-.993,3-1.206A4.682,4.682,0,0,1,17.9,7.989c-.071.218,2.112,2.217.9,5.426-.494,1.309-1.74,2.968-4.866,3.434h0a3.086,3.086,0,0,1,.879,2.2V24A12.454,12.454,0,0,0,24,12,12.047,12.047,0,0,0,12,0Z"></path></svg></a></li></ul></li></ul></div></div></div></div><div class="TK-row TK-row--M1"><div class="TK-col-24"><a href="https://wwwuat.progress.com" aria-label="Go to Progress.com" class="TK-PRGS-Logo-Footer" data-sf-ec-immutable=""><svg xmlns="http://www.w3.org/2000/svg" width="130" height="30" viewBox="0 0 512 120"><path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path><path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path></svg></a></div></div><div class="TK-row"><div class="TK-col-12"><p class="TK-Footer-About">Telerik and Kendo UI are part of Progress product portfolio. Progress is the leading provider of application development and digital experience technologies.</p></div><div class="TK-col-24"><div class="TK-row--M3 TK--Footer-Desktop"><ul class="TK-Footer-List-Horizontal"><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://wwwuat.progress.com/company" data-sf-ec-immutable="">Company</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://wwwuat.progress.com/products" data-sf-ec-immutable="">Technology</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://wwwuat.progress.com/company/awards" data-sf-ec-immutable="">Awards</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://investors.progress.com/press-releases" data-sf-ec-immutable="">Press Releases</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://wwwuat.progress.com/company/press-coverage" data-sf-ec-immutable="">Media Coverage</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://wwwuat.progress.com/company/careers" data-sf-ec-immutable="">Careers</a></li><li class="TK-Footer-List-Horizontal-Item"><a class="TK-Footer-Link TK-Footer-Link-Horizontal" href="https://wwwuat.progress.com/company/offices" data-sf-ec-immutable="">Offices</a></li></ul></div></div></div><div class="TK-row TK-row--M2 TK--Footer-Mobile"><div class="TK-col-24"><ul class="TK-Footer-List"><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/company" class="TK-Footer-Link" data-sf-ec-immutable="">Company</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/products" class="TK-Footer-Link" data-sf-ec-immutable="">Technology</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/company/awards" class="TK-Footer-Link" data-sf-ec-immutable="">Awards</a></li><li class="TK-Footer-List-Item"><a href="https://investors.progress.com/press-releases" class="TK-Footer-Link" data-sf-ec-immutable="">Press Releases</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/company/press-coverage" class="TK-Footer-Link" data-sf-ec-immutable="">Media Coverage</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/company/careers" class="TK-Footer-Link" data-sf-ec-immutable="">Careers</a></li><li class="TK-Footer-List-Item"><a href="https://wwwuat.progress.com/company/offices" class="TK-Footer-Link" data-sf-ec-immutable="">Offices</a></li></ul></div></div><div class="TK-row"><div class="TK-col-16"><p class="TK-Footer-Copy">Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p><p class="TK-Footer-Copy">Progress and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See <a href="https://wwwuat.progress.com/legal/trademarks" class="TK-Footer-Link-Tiny" data-sf-ec-immutable="">Trademarks</a> for appropriate markings.</p></div><div class="TK-col-8 TK-tar"><ul class="TK-Footer-List-Horizontal"><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="/about/terms-of-use" class="TK-Footer-Link-Tiny" data-sf-ec-immutable="">Terms of Use</a></li><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="/feedback" class="TK-Footer-Link-Tiny" data-sf-ec-immutable="">Site Feedback</a></li><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="https://wwwuat.progress.com/legal/privacy-center" class="TK-Footer-Link-Tiny" target="_blank" rel="noopener" data-sf-ec-immutable="">Privacy Center</a></li><li class="TK-Footer-List-Horizontal-Item TK-Footer-List-Horizontal-Item-Effect"><a href="https://wwwuat.progress.com/trust-center" class="TK-Footer-Link-Tiny" target="_blank" rel="noopener" data-sf-ec-immutable="">Trust Center</a></li></ul><div class="TLRK-CCPA"><a href="https://forms.progress.com/ccpa-subscription" target="_blank" rel="nofollow noopener" data-sf-ec-immutable="">Do Not Sell or Share My Personal Information</a></div><p class="TK-Footer-Power">Powered by <a href="https://wwwuat.progress.com/sitefinity-cms" class="TK-Footer-Link-Tiny" data-sf-ec-immutable="">Progress Sitefinity</a></p></div></div></div></footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js" type="text/javascript"></script> <script type="text/javascript"> var oneTrustHelper = (function () { function evalGTMScript() { var gtmScript = document.getElementById("GTMScript"); gtmScript.type = "text/javascript"; gtmScript.classList.remove("optanon-category-1"); eval(gtmScript.innerHTML); }; return { gtmFallback: function () { console.warn('OneTrust not loaded.'); if (document.readyState !== 'loading') { evalGTMScript(); } else { document.addEventListener('readystatechange', function () { if (document.readyState === 'interactive') { evalGTMScript(); } }); }; } }; })(); </script> <script onerror="oneTrustHelper.gtmFallback()" src="https://cdn.cookielaw.org/consent/3dfce4f2-dab6-4128-9f33-df7e0597da82/otSDKStub.js" data-language="en" type="text/javascript" charset="UTF-8" data-domain-script="3dfce4f2-dab6-4128-9f33-df7e0597da82"></script> <script type="text/javascript"> (function (w) { w.OptanonGroups = {"StrictlyNecessaryCookies":"1","PerformanceCookies":"2","FunctionalCookies":"3","TargetingCookies":"4"}; w.isOptanonGroupActive = function (groupId, explicit) { if (!w.OptanonActiveGroups) return false; var groupMatchKey = ',' + groupId + ','; return w.OptanonActiveGroups.indexOf(groupMatchKey) !== -1; } function toggleSitefinityTrackingConsent() { var performanceCookiesGroupId = w.OptanonGroups.PerformanceCookies; var isPerformanceCookiesGroupIdActive = w.isOptanonGroupActive(performanceCookiesGroupId, true); if (w.TrackingConsentManager) { w.TrackingConsentManager.updateUserConsent(isPerformanceCookiesGroupIdActive); } }; var trackingScriptsQueue = []; w.invokeTrackingScript = function (thisReference, trackingGroup, functionReference) { if (isOptanonGroupActive(trackingGroup, true)) { functionReference.call(thisReference); } else { trackingScriptsQueue.push({ thisReference: thisReference, trackingGroup: trackingGroup, functionReference: functionReference }); } } var isOptanonToggled = false; var preferenceChangeHandlerAdded = false; w.OptanonWrapper = function () { var newTrackingScriptsQueue = []; for (var i = 0; i < trackingScriptsQueue.length; i++) { var trackingScriptData = trackingScriptsQueue[i]; if (isOptanonGroupActive(trackingScriptData.trackingGroup, true)) { trackingScriptData.functionReference.call(trackingScriptData.thisReference); } else { newTrackingScriptsQueue.push(trackingScriptData); } } trackingScriptsQueue = newTrackingScriptsQueue; if (!isOptanonToggled && w.location.hash === '#cookie-settings' && true) { isOptanonToggled = true; Optanon.ToggleInfoDisplay(); } if(!preferenceChangeHandlerAdded){ OneTrust.OnConsentChanged(function() { // Trigger cookie check process after user makes changes to allowed cookie groups from the OneTrust cookie settings dialog. $.ajax( { url: '/webapi/CookiePreferences/Update', type: 'HEAD' }); }); preferenceChangeHandlerAdded = true; } toggleSitefinityTrackingConsent(); } })(window); </script> <script> // global variables var telerikId; var tlrkUser; </script> <script> (async function () { const response = await fetch("/webapi/UserTracking/RetrieveTelerikId", { method: "GET", cache: "no-cache", }); const model = await response.json(); telerikId = model.telerikId; tlrkUser = { isAuthenticated: !!telerikId }; if (document.addEventListener) { window.dataLayer = window.dataLayer || []; dataLayer.push({ uniqueId: model.userId, telerikId }); dataLayer.push({ event: "persistuuid" }) } })(); </script> <script id="GTMScript" type="text/plain" class="optanon-category-1" > function isMobileDevice() { var result = false; var matches = [ /(Windows Phone(?: OS)?)\s(\d+)\.(\d+(\.\d+)?)/, /(Silk)\/(\d+)\.(\d+(\.\d+)?)/, /(Android|Android.*(?:Opera|Firefox).*?\/)\s*(\d+)\.?(\d+(\.\d+)?)?/, /(iPhone|iPod).*OS\s+(\d+)[\._]([\d\._]+)/, /(iPad).*OS\s+(\d+)[\._]([\d_]+)/, /(MeeGo).+NokiaBrowser\/(\d+)\.([\d\._]+)/, /(webOS)\/(\d+)\.(\d+(\.\d+)?)/, /(BlackBerry|BB10).*?Version\/(\d+)\.(\d+(\.\d+)?)/, /(PlayBook).*?Tablet\s*OS\s*(\d+)\.(\d+(\.\d+)?)/, /(MSIE)\s+(\d+)\.(\d+(\.\d+)?)/, /(tizen).*?Version\/(\d+)\.(\d+(\.\d+)?)/i, /(sailfish).*rv:(\d+)\.(\d+(\.\d+)?).*firefox/i, /(Mobile).*rv:(\d+)\.(\d+(\.\d+)?).*Firefox/ ]; for (var i = 0; i < matches.length; i++) { result = matches[i].test(window.navigator.userAgent); if (result) { break; } } return result; } (function () { 'use strict'; window.dataLayer = window.dataLayer || []; dataLayer.push({ isTelerikMarketingWebsite: true }); if (isMobileDevice()) { return; } (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92'); })(); </script> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe> </noscript> <script type="text/plain" class="optanon-category-2"> !function (e) { function n() { if (e && r()) { var n = t(); i(e, n) } } function i(e, n) { l.post(u, new c({ telerikId: e, uniqueId: n })) } function t() { for (var e = document.cookie.split(";"), n = "gauuid", i = 0; i < e.length; i++) { for (var t = e[i]; " " === t.charAt(0);)t = t.substring(1, t.length); if (0 === t.indexOf(n)) return t.substring(n.length, t.length).replace("=", "") } return null } function r() { var e = new Date; if (null === localStorage.getItem(a)) return o(e), !0; var n = Date.parse(localStorage.getItem(a)); if (isNaN(n)) return !1; var i = new Date(n); return i.setTime(i.getTime() + 6048e5) < e ? (o(e), !0) : !1 } function o(e) { localStorage.setItem(a, e.toISOString()) } if (window.jQuery) { var l = window.jQuery, u = window.location.origin + "/services/callhomeservice/api/userlogged", a = "call-home-client-key-user-logged", c = function (e) { this.telerikId = e.telerikId, this.uniqueId = e.uniqueId }; l(document).ready(function () { n() }), window.__callhome__ || (window.__callhome__ = {}), window.__callhome__.verify = r, window.__callhome__.init = n } }(telerikId); </script> <script src="https://d585tldpucybw.cloudfront.net/Frontend-Assembly/Web.Widgets.SEO/Mvc/Scripts/Shared/referrer-policy.min.js?package=PureMvc&v=MS4wLjAuMzgwNjY%3d" type="text/javascript"></script><script src="https://dtzbdy9anri2p.cloudfront.net/cache/924eeda31ef3d27a750a63acdfc86c28178126b2/telerik/js/dist/all.min.js" type="text/javascript"></script> <script type="text/javascript"> (function() { if (window._dataLayerTimeout) { clearTimeout(window._dataLayerTimeout); } window._dataLayerTaxLoadedEvent = {"tax_pagenode_products":"kendo-angular-ui","event":"tax_loaded"}; window._dataLayerTimeout = setTimeout(function() { window.dataLayer = window.dataLayer || []; window.dataLayer.push(window._dataLayerTaxLoadedEvent); }); })(); </script><script type="text/plain" class="optanon-category-2"> (function() { var script = '//s1325.t.eloqua.com/visitor/v200/svrGP?pps=70&siteid=1325'; (function getScript(source, callback) { var script = document.createElement('script'); var prior = document.getElementsByTagName('script')[0]; script.async = 1; prior.parentNode.insertBefore(script, prior); script.onload = script.onreadystatechange = function( _, isAbort ) { if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) { script.onload = script.onreadystatechange = null; script = undefined; if(!isAbort) { if(callback) callback(); } } }; script.src = source; })(script, function() { if (typeof GetElqCustomerGUID == 'function') { var userId = GetElqCustomerGUID(); document.cookie = 'elqUserId=' + userId + '; path=/;SameSite=Lax;'; } }); })(); </script><script type="application/json" id="PersonalizationTracker"> {"IsPagePersonalizationTarget":false,"IsUrlPersonalizationTarget":false,"PageId":"d670be97-5951-456b-9785-5407f9e4ef33"} </script><script type="text/javascript" src="/WebResource.axd?d=NjxTqR2bqTw1rewxxlkHPhr-2awQiGC1t4afxFkRlQ9hya2sD15bGrdgIYxV5oymd7lM20nXinlfNQ7rubKudQ2RDNHnt0G9zqYW8HltmFjcKKorrcw5dV0tBFxsPvDHJP04y9syTz7mNZS4jPK7kvcqYvWCXk_9LL20Ml6lJlZfLS7RIWZnqaGGXv0sk0sXw5161BHGhvkqb9uCayn9Kq57pV9u23lE6Pml2fnEAC01&t=638412637940000000"> </script> <script type="text/plain" class="optanon-category-2"> !function () { function loadEloqua() { if (void 0 === window._elqQ || window._elqQ.constructor !== Array || "elqSetSiteId" !== window._elqQ[0][0] || "1325" !== window._elqQ[0][1]) { window.dataLayer = window.dataLayer || [], window._elqQ = window._elqQ || [], window._elqQ.push(["elqSetSiteId", "1325"]), window._elqQ.push(["elqTrackPageView", window.location.href]), window.dataLayer.push({ event: "elqQ_loaded" }); var s = document.createElement("script"); s.type = "text/javascript", s.async = !0, s.src = "//img.en25.com/i/elqCfg.min.js"; var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x) } } function loadGA() { window._gaq = window._gaq || [], window._gaq.push(["_setAccount","UA-111455-1"], ["_setDomainName", ".telerik.com"], ["_addIgnoredRef", "telerik.com"], ["_trackPageview"]); var ga = document.createElement("script"); ga.type = "text/javascript", ga.async = !0, ga.src = ("https:" == document.location.protocol ? "https://" : "http://") + "stats.g.doubleclick.net/dc.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s) } isMobileDevice() && (loadGA(), loadEloqua()) }();</script> <script type="text/javascript" defer src='https://d585tldpucybw.cloudfront.net/Frontend-Assembly/Web.SitefinityExtensions.EloquaConnector/Scripts/BrowserSessionStorage.min.js?package=PureMvc&v=MS4wLjAuMzgwNjY%3d'></script> <script type="text/javascript" defer src='https://d585tldpucybw.cloudfront.net/Frontend-Assembly/Web.SitefinityExtensions.EloquaConnector/Scripts/SetBrowserSessionStorage.min.js?package=PureMvc&v=MS4wLjAuMzgwNjY%3d)'></script> </body> </html>