Render palette alone in Blazor Color Picker Component

7 Aug 20261 minute to read

Render only the palette in the Color Picker by setting the Mode property to ColorPickerMode.Palette and disabling the ModeSwitcher to prevent switching to the picker view.

In the following sample, the ShowButtons property is set to false to hide the control buttons, so only the palette area is displayed and color selection applies immediately.

@using Syncfusion.Blazor.Inputs

<h4>Choose a color</h4>
<SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" ShowButtons="false"></SfColorPicker>
Rendering Palette Alone in Blazor ColorPicker

NOTE

To display the palette embedded in the page instead of in a popup, set Inline="true". To render Picker alone, specify the Mode property as ‘Picker’.

Render the palette inline

To display the palette embedded in the page (instead of in a popup), set Inline="true". The following example shows an inline palette that fills its parent container.

@using Syncfusion.Blazor.Inputs

<h4>Choose a color</h4>
<SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" ShowButtons="false" Inline="true"></SfColorPicker>

Render the picker view alone

To render only the picker view without the palette, set the Mode property to ColorPickerMode.Picker and disable the ModeSwitcher so users cannot switch back to the palette.

@using Syncfusion.Blazor.Inputs

<h4>Choose a color</h4>
<SfColorPicker Mode="ColorPickerMode.Picker" ModeSwitcher="false" ShowButtons="false" Inline="true"></SfColorPicker>

See also