Basic usage

Pick anything, or paste a hex/rgb value.

<BOBInputColor @bind-Value="_basic" Label="Color" HelperText="Pick anything, or paste a hex/rgb value." />

Variants

<BOBInputColor @bind-Value="_outlinedValue" Variant="BOBInputVariant.Outlined" Label="Outlined" />
<BOBInputColor @bind-Value="_filledValue" Variant="BOBInputVariant.Filled" Label="Filled" />
<BOBInputColor @bind-Value="_standardValue" Variant="BOBInputVariant.Standard" Label="Standard" />

Sizes

<BOBInputColor @bind-Value="_smallValue" Label="Small" Size="BOBSize.Small" />
<BOBInputColor @bind-Value="_mediumValue" Label="Medium (Default)" Size="BOBSize.Medium" />
<BOBInputColor @bind-Value="_largeValue" Label="Large" Size="BOBSize.Large" />

Color & Background

<BOBInputColor @bind-Value="_colorValue" Label="Custom Color & Background" Color="@PaletteColor.Secondary" BackgroundColor="@PaletteColor.SecondaryContrast" />

Prefix & Suffix

<BOBInputColor @bind-Value="_prefixValue" Label="With Prefix Icon"
               PrefixIcon="@BOBIconKeys.MaterialIconsOutlined.i_palette"
               PrefixBackgroundColor="white"
               PrefixColor="black" />
<BOBInputColor @bind-Value="_suffixValue" Label="With Suffix Icon"
               SuffixIcon="@BOBIconKeys.MaterialIconsOutlined.i_palette"
               SuffixBackgroundColor="white"
               SuffixColor="black" />

Output formats

Pick the serialization format that matches your back-end.

<BOBInputColor @bind-Value="_hex" Label="HEX" OutputFormat="ColorOutputFormats.Hex" />
<BOBInputColor @bind-Value="_hex" Label="HEXA" OutputFormat="ColorOutputFormats.HexA" />
<BOBInputColor @bind-Value="_rgba" Label="RGB" OutputFormat="ColorOutputFormats.Rgb" />
<BOBInputColor @bind-Value="_rgba" Label="RGBA" OutputFormat="ColorOutputFormats.Rgba" />
<BOBInputColor @bind-Value="_rgba" Label="Optimized" OutputFormat="ColorOutputFormats.Optimized" />

Display modes

<BOBInputColor @bind-Value="_inline" Label="Dropdown" DisplayMode="ColorPickerDisplayMode.Dropdown" />
<BOBInputColor @bind-Value="_inline" Label="Modal" DisplayMode="ColorPickerDisplayMode.Modal" />

Clearable

Clear reverts to initial value (nullable)

Clear reverts to initial value (not nullable)

<BOBInputColor @bind-Value="_clearableNull" HelperText="Clear reverts to initial value (nullable)"
               Label="Clearable Nullable" Clearable="true" ShowCopyButton="true" />
<BOBInputColor @bind-Value="_clearableNotNull" HelperText="Clear reverts to initial value (not nullable)"
               Label="Clearable NotNullable" Clearable="true" ShowCopyButton="true" />

Shadow

<BOBInputColor @bind-Value="_shadowValue" Variant="BOBInputVariant.Outlined" Label="Elevation Shadow" Shadow="@BOBShadowPresets.Elevation(2)" />
<BOBInputColor @bind-Value="_shadowValue" Variant="BOBInputVariant.Outlined" Label="Custom Shadow" Shadow="@(ShadowStyle.Create(5, 10, 0.14f, color: "purple"))" />

States

Required

Disabled

ReadOnly

<BOBInputColor @bind-Value="_requiredValue" Label="Required" Required="true" HelperText="Required" />
<BOBInputColor @bind-Value="_disabledValue" Label="Disabled" Disabled="true" HelperText="Disabled" />
<BOBInputColor @bind-Value="_readOnlyValue" Label="Read Only" ReadOnly="true" HelperText="ReadOnly" />

Responsive Picker

Canvas adapts to its container width via CSS aspect-ratio.

<BOBInputColor @bind-Value="_customPickerValue" Label="Responsive Picker"
               HelperText="Canvas adapts to its container width via CSS aspect-ratio." />

Standalone picker

Use BOBColorPicker directly — no input field, just the picker.

<BOBColorPicker @bind-Value="_standalone" />

Properties

Property	Type	Default	Description
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the input.
`Loading`	`bool`		When , the input shows a loading indicator.
`LoadingIndicatorVariant`	`BOBLoadingIndicatorVariant`	`BOBLoadingIndicatorVariant.CircularProgress`	Variant of the loading indicator shown when is .
`Shadow`	`ShadowStyle?`		Shadow style applied to the input container.
`BackgroundColor`	`string?`		Background color of the input. Accepts any valid CSS color value.
`Color`	`string?`		Text color of the input. Accepts any valid CSS color value.
`PrefixText`	`string?`		Text displayed before the input value.
`PrefixIcon`	`IconKey?`		Material icon name for the Prefix.
`PrefixColor`	`string?`		Prefix color. Accepts any valid CSS color value.
`PrefixBackgroundColor`	`string?`		PrefixBackground color. Accepts any valid CSS color value.
`SuffixText`	`string?`		Text displayed after the input value.
`SuffixIcon`	`IconKey?`		Material icon name for the Suffix.
`SuffixColor`	`string?`		Suffix color. Accepts any valid CSS color value.
`SuffixBackgroundColor`	`string?`		SuffixBackground color. Accepts any valid CSS color value.
`Label`	`string?`		Floating label displayed above the input when it has a value or focus.
`HelperText`	`string?`		Helper text displayed below the component for additional context.
`Placeholder`	`string?`	`"#000000"`	Placeholder text shown when the component is empty.
`ShowCopyButton`	`bool`		When , the CopyButton is shown.
`Clearable`	`bool`		When , a clear button reverts the value to .
`DisplayMode`	`ColorPickerDisplayMode`	`ColorPickerDisplayMode.Dropdown`	Layout used to expose the color editor: dropdown, popover, or inline panel.
`OutputFormat`	`ColorOutputFormats`		String format used to serialize the picked color (hex, rgb(a), hsl(a), etc.).
`RevertText`	`string`	`"Revert"`	Text displayed as the Revert.