# Appearance

The OTPInput exposes a set of appearance props that let you match the component to your application's visual design.

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

* [Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance#configurator-demo)
* [Size](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance#size)
* [Rounded](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance#rounded)
* [Fill Mode](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance#fill-mode)
* [Spacing](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance#spacing)
* [Length](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/otpinput/appearance#length)

## Configurator demo

The following example demonstrates configuring different aspects of an OTPInput appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/appearance/configurator/source.txt)

## Size

The Kendo UI for Vue OTPInput enables you to configure the [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#size) of the component.

The `size` option supports the following values:

* `small`
* `medium` (Default)
* `large`

The following example demonstrates the available `size` options.

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

## Rounded

The Kendo UI for Vue OTPInput allows you to define different border radius styles by using the [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#rounded) property.

The `rounded` option supports the following values:

* `small`
* `medium` (Default)
* `large`
* `full`
* `none`

The following example demonstrates the available `rounded` options.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/appearance/rounded/source.txt)

## Fill Mode

The Kendo UI for Vue OTPInput allows you to set the cell background and border style by using the [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#fillmode) property.

The `fillMode` option supports the following values:

* `solid` (Default)
* `flat`
* `outline`

The following example demonstrates the available `fillMode` options.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/appearance/fill-mode/source.txt)

## Spacing

By default, adjacent cells have a small gap between them. Set [`spacing`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#spacing) to `false` to remove the gap and render cells flush against each other.

The following example demonstrates both `spacing` options.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/appearance/spacing/source.txt)

## Length

The [`length`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops#length) prop controls the total number of individual input cells. The default value is `4`.

The following example demonstrates how to configure the OTPInput length.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/otpinput/appearance/length/source.txt)

## Suggested Links

* [API Reference of the OTPInput Props](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/otpinputprops)