• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Labelling components without form element

By default the target editor is associated with the label element only if it's a form element (e.g.: input, select element). Custom components that do not contain form element (e.g.: KendoReact DropDownList) would require setting additional properties to allow screen readers to correcly read the label. These properties are:

  • id property of the Label
  • aria-labelledby attribute of the editor (KendoReact components provide it as ariaLabelledBy property)

Additionally you can forward the click events from the Label to the editor by setting the editorRef property. On click events the Label component will look for focus method or activeElement property (to call its click method) on the editor ref. This functionality is already supported on all KendoReact form components (e.g.: DropDownList).

Example
View Source
Change Theme:

In this article

Not finding the help you need?