---
title: Usage
position: 2
seo_title: Guidelines for Using the SegmentedControl Component
seo_description: Get the knack of the Telerik and Kendo UI SegmentedControl and
  learn how to use the sizing and content options of the component by following
  the instructions and recommendations in the user guidelines created by our
  designers.
---
## Usage Guidelines

In addition to the [guidelines for using the Telerik and Kendo UI ButtonGroup](/components/buttongroup/usage/), the SegmentedControl requires you to follow some basic principles when using the multi-button component.

### Keep Icons Consistent

Icons in a SegmentedControl should remain visually consistent regardless of whether a segment is selected or not. Changing icons between states can confuse users and make it harder to recognize options. Instead, rely on state styling—such as background, color, or emphasis—to indicate selection while keeping the icon itself unchanged.

<DosDonts>
<Do description="Keep icons consistent and unchanged across active and inactive states.">![A Telerik and Kendo UI SegmentedControl using consistent icons for its segments regardless of their state.](images/components-segmentedcontrol-usage-activestate-do.png "Use consistent icons for the segments inside a Telerik and Kendo UI SegmentedControl regardless of their state.")</Do>
<Dont description="Avoid replacing icons with checkmarks or alternate icons in the selected state.">![A Telerik and Kendo UI SegmentedControl using consistent icons for its segments regardless of their state.](images/components-segmentedcontrol-usage-activestate-dont.png "Don’t change segment icons based on state in a Telerik and Kendo UI SegmentedControl.")</Dont>
</DosDonts>


### Short and Simple

Use concise, one-word labels to keep segments readable and visually balanced.

<DosDonts>
<Do description="Keep labels short and concise to improve readability and visual balance.">![A Telerik and Kendo UI SegmentedControl using short text labels to maintain a clean and consistent visual appearance.](images/components-segmentedcontrol-usage-shortandsimple-do.png "Use only short text labels in the Telerik and Kendo UI SegmentedControl to maintain a clean and consistent visual appearance.")</Do>
<Dont description="Avoid long, multi-word labels, as they reduce readability. In such cases, use the DropDownList component instead.">![A Telerik and Kendo UI SegmentedControl using short text labels to maintain a clean and consistent visual appearance.](images/components-segmentedcontrol-usage-shortandsimple-dont.png "Don’t use long or complex text labels in the Telerik and Kendo UI SegmentedControl, as they can disrupt a clean and consistent visual appearance.")</Dont>
</DosDonts>


### Consistent Size

All segments should have equal width to create a stable and predictable layout.

<DosDonts>
<Do description="Maintain consistent button widths across all segments.">![A Telerik and Kendo UI SegmentedControl with segments of consistent width to ensure a balanced and visually aligned layout.](images/components-segmentedcontrol-usage-consisten-size-do.png "Use only segments of consistent width in the Telerik and Kendo UI SegmentedControl to ensure a balanced and visually aligned layout.")</Do>
<Dont description="Avoid altering the width of individual segments.">![A Telerik and Kendo UI SegmentedControl with segments of consistent width to ensure a balanced and visually aligned layout.](images/components-segmentedcontrol-usage-consisten-size-dont.png "Avoid using segments of varying widths in the Telerik and Kendo UI SegmentedControl, as this can disrupt a balanced and visually aligned layout.")</Dont>
</DosDonts>


### Limit Segments

Use the SegmentedControl for switching between a small number of options, as too many segments can reduce readability and make the control harder to scan and use.

<DosDonts>
<Do description="Segmented buttons are best used for selecting between 2 and 5 choices.">![A Telerik and Kendo UI SegmentedControl with a maximum of five choices to maintain clarity and usability.](images/components-segmentedcontrol-usage-limit-segments-do.png "Use only five or fewer choices in the Telerik and Kendo UI SegmentedControl to maintain clarity and usability.")</Do>
<Dont description="Avoid using too many segments, as this increases cognitive load, causes visual clutter, and reduces touch and click accuracy.">![A Telerik and Kendo UI SegmentedControl with too many segments that can reduce readability and make the control harder to scan and use.](images/components-segmentedcontrol-usage-limit-segments-dont.png "Avoid using too many segments in the Telerik and Kendo UI SegmentedControl to maintain clarity and usability.")</Dont>
</DosDonts>


### Text Truncation

Use text truncation only when space is constrained and the label meaning remains clear without the full text.

<DosDonts>
<Do description="Truncate text only when absolutely necessary, and provide a tooltip or other indication on hover to show the full word.">![A Telerik and Kendo UI SegmentedControl where segment text may be truncated when necessary to fit the layout while preserving overall readability.](images/components-segmentedcontrol-usage-text-truncation-do.png "A Telerik and Kendo UI SegmentedControl where segment text is truncated only when necessary to maintain layout and readability.")</Do>
<Dont description="Avoid truncating text without indicating the full word, as this can cause confusion and lead to a poor user experience.">![A Telerik and Kendo UI SegmentedControl where segment text may be truncated when necessary to fit the layout while preserving overall readability.](images/components-segmentedcontrol-usage-text-truncation-dont.png "Avoid truncating text in a Telerik and Kendo UI SegmentedControl unless necessary to maintain layout and readability.")</Dont>
</DosDonts>