# Styling and Appearance

Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox.

## Content



You can change the style and appearance of the numeric box by using the **Style** property. The image below shows how NumericBox appear after setting the styling properties.<br />

![NumericBox control with different styles](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/stylenumeric.png)

The following code example demonstrates customized numeric boxes using Style, Format and other properties.

```razor
<label>CustomStyle & Layout</label>
<div>
    <C1NumericBox Format="##,###.##" Placeholder="Any Text" Style="@_customStyle1" TNumeric="double?"></C1NumericBox> <br /> <br />
    <C1NumericBox Format="##,###.##" Placeholder="Any Text" ButtonDisplayMode="@ButtonDisplayMode.Right" Style="@_customStyle2" TNumeric="double?"></C1NumericBox>  <br /> <br />
    <C1NumericBox Format="##,###.##" Placeholder="Any Text" ButtonDisplayMode="@ButtonDisplayMode.None" Style="@_customStyle3" TNumeric="double?"></C1NumericBox> <br /> <br />
```

```razor
@code{
    double? _value;
    readonly C1Style _c1Style = new C1Style() { Width = 130 };
    readonly C1Style _customStyle1 = new C1Style() { Width = 230, Height = 45, BorderColor = "orange", BorderWidth = 1, };
    readonly C1Style _customStyle2 = new C1Style() { Width = 230, Height = 55, BorderColor = "green", BorderWidth = 3, };
    readonly C1Style _customStyle3 = new C1Style() { Width = 270, Height = 65, BorderColor = "violet", BorderWidth = 5, };
    private void HandleValueChanged(object sender, C1NumericBoxEventArgs e)
    {
        _value = (double?)e.Value;
        StateHasChanged();
    }
}
```