Blazor ColorPalette - Overview

Comfy T-shirt with a cut-away neckline

$19.99

incl. VAT

Navy Blue

  • Overview.razor
Loading the demo source code...please wait.
blazor ui ninja image

The ColorPalette component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

The Telerik UI for Blazor ColorPalette is a compact color selector that behaves much like a radio button group. It renders color sets by using groups of predefined colors or by implementing a custom color palette. The user can select them with the keyboard by clicking or tapping them. The application receives the chosen color through events or two-way binding. A common use case is selecting the color of a product in an online store.

Features supported:

  • Color presets: Choose from the built-in color groups rather than defining your own.
  • Custom colors: Choose to define your own color set.
  • Keyboard navigation: Allow uses to interact via а keyboard.

Parameters supported:

  • CSS: Edit the wrapper class.
  • Colors: Set the colors.
  • Columns: Determine how many colors to show.
  • TabIndex: Set the focus order on the page.
  • TileHeight and TileWidth: Size the individual color items.
  • Value: Sets the value of the input to be used for binding. Can be any CSS background color and uses the HEX format. This can be validated.

The demo above shows a fictional clothing sales page in which users can select a color of the Kendoka shirt and see a preview of the model. In the source tab, you can see how the component is initialized, colors set and dimensions configured. In this demo, colors are set manually, but you can also use one of the built-in color sets.

This ColorPalette Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.