# Appearance

The NumericTextBox provides a predefined set of appearance options.

Apart from the default vision of the NumericTextBox, these alternative styling options enable you to configure each individual aspect of the appearance of a NumericTextBox.

* [Size](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/appearance#size)
* [Fill Mode](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/appearance#fill-mode)
* [Border Radius](https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/appearance#border-radius)

The following example demonstrates all the available appearance options of the NumericTextBox in a single, configurable demo.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/numerictextbox/appearance/func/source.txt)

## Size

The NumericTextBox allows you to set different `size` options. To achieve this, use the [`size`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#size) property.

The [`size`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#size) option supports the following values:

* `small`
* `medium`
* `large`
* `none`

The following example demonstrates how to define the size of the NumericTextBox.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/numerictextbox/appearance/size/source.txt)

## Fill Mode

The NumericTextBox allows you to set different fill modes by using the [`fillMode`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#fillMode) property.

The [`fillMode`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#fillMode) option supports the following values:

* `flat`
* `solid`
* `outline`
* `none`

The following example demonstrates how to define the fill mode of the NumericTextBox.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/numerictextbox/appearance/fillMode/source.txt)

## Border Radius

The NumericTextBox enables you to apply different border radius to the component through the [`rounded`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#rounded) property.

The [`rounded`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#rounded) option supports the following values:

* `small`
* `medium`
* `large`
* `full`
* `none`

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/numerictextbox/appearance/borderradius/source.txt)

## Width

The NumericTextBox enables you to apply different width size to the component through the [`width`](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#width) property.

[Demo Source](https://demos.telerik.com/kendo-react-ui/inputs/numerictextbox/appearance/width/source.txt)

## Suggested Links

* [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)

* [API Reference of the NumericTextBox](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops)

* [NumericTextBox `prefix` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#prefix)

* [NumericTextBox `suffix` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#suffix)

* [NumericTextBox `size` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#size)

* [NumericTextBox `fillMode` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#fillMode)

* [NumericTextBox `rounded` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/numerictextboxprops#rounded)

* [Creating Custom Styles](https://www.telerik.com/kendo-react-ui/components/styling/theme-builder)