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.