New to Telerik UI for BlazorStart a free 30-day trial

Code Snippets

The Telerik Visual Studio Code extension provides a handy feature for increased developer productivity – code snippets for fast UI component reference and configuration.

Get the Extension

To use the Telerik UI for Blazor Code Snippets, install the Telerik UI for Blazor Visual Studio Code Extension. You can get the extension from:

  • The Visual Studio Marketplace.

  • The Extensions tab in Visual Studio Code - search for Telerik UI for Blazor Productivity Tools, select the extension, and then click Install.

Add a Code Snippet to a .razor page

  1. Use the tb shortcut that stands for Telerik Blazor and select a snippet from the dropdown menu.
    1. Alternatively, type the component name, and the available snippets will appear in a dropdown menu.
  2. Use a Tab sequence to populate the available attributes of the component.

Add a code snippet to your .razor page

add a code snippet

Available Code Snippets

Code SnippetComponent
tb-autocompleteAutoComplete
tb-autocomplete-filterableAutoComplete with Filtering
tb-barcodeBarcode
tb-breadcrumbBreadcrumb
tb-buttonButton
tb-button-settingsButton with Appearance Settings
tb-calendarCalendar
tb-carouselCarousel
tb-checkboxCheckbox
tb-checkbox-tristateCheckbox in Indeterminate State
tb-chunkprogressbarChunkProgressBar
tb-colorgradientColorGradient
tb-colorpaletteColorPalette
tb-colorpickerColorPicker
tb-comboboxComboBox
tb-combobox-filterableComboBox with Filtering
tb-contextmenuContextMenu
tb-dateintputDateInput
tb-datepickerDatePicker
tb-daterangepickerDateRangePicker
tb-datetimepickerDate-Time Picker
tb-dialogDialog
tb-drawerDrawer
tb-dropdownlistDropDownList
tb-dropdownlist-filterableDropDownList with Filtering
tb-editorEditor
tb-fileselectFileSelect
tb-filterFilter
tb-flatcolorpickerFlatColorPicker
tb-formForm
tb-ganttGantt
tb-gantt-editableGantt with Editing
tb-ganttcolumnGantt - Databound Column
tb-gridGrid
tb-grid-editableGrid with Editing
tb-gridcolumnGrid - Databound Column
tb-gridcolumn-lockedGrid with Frozen Column
tb-gridlayoutGridLayout
tb-listviewListView
tb-listview-editableListView with Editing
tb-loaderLoader
tb-loadercontainerLoaderContainer
tb-maskedtextboxMasked Textbox
tb-menuMenu
tb-multiselectMultiSelect
tb-multiselect-filterableMultiSelect with Filtering
tb-numerictextboxNumeric Textbox
tb-pagerPager
tb-panelbarPanelBar
tb-progressbarProgressBar
tb-qrcodeQRCode
tb-radiogroupRadioGroup
tb-rangesliderRangeSlider
tb-schedulerScheduler
tb-scheduler-editableScheduler with Editing
tb-sliderSlider
tb-splitterSplitter
tb-stacklayoutStackLayout
tb-stepperStepper
tb-switchSwitch
tb-tabstripTabStrip
tb-textareaTextArea
tb-textboxTextbox
tb-tilelayoutTileLayout
tb-timepickerTime Picker
tb-togglebuttonToggleButton
tb-tooltipTooltip
tb-treelistTreeList
tb-treeList-editableTreeList with Editing
tb-treelistcolumnTreeList - Databound Column
tb-treelistcolumn-lockedTreeList with Frozen Column
tb-treeviewTreeView
tb-uploadUpload
tb-windowWindow
tb-wizardWizard