# Appearance

The TextBox provides a predefined set of appearance options.

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

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

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

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

## Size

The KendoReact TextBox enables you to configure its [`size`](https://www.telerik.com/kendo-react-ui/components/inputs/api/textboxprops#size).

* `small`
* `large`
* `medium` (Default)
* `null` Does not set a size `className`

The following example demonstrates how to set the size of the TextBox.

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

## Border Radius

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

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

* `small`
* `medium` (Default)
* `large`
* `full`
* `none`— Does not set a `className` for size

The following example demonstrates how to define the border radius of the TextBox.

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

## Fill Mode

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

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

* `solid` (Default)
* `flat`
* `outline`
* `clear`
* `link`
* `null`

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

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

## Suggested Links

* [API Reference of the TextBox](https://www.telerik.com/kendo-react-ui/components/inputs/api/textboxprops)
* [TextBox `size` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/textboxprops#size)
* [TextBox `fillMode` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/textboxprops#fillMode)
* [TextBox `rounded` options](https://www.telerik.com/kendo-react-ui/components/inputs/api/textboxprops#rounded)
* [Creating Custom Styles](https://www.telerik.com/kendo-react-ui/components/styling/theme-builder)