# Setting the Width

The Input components have different default `width`, depending on their rendering and purpose.

Some Inputs (like the Switch or ColorPicker) have specific `width` applied out of the box, as this is essential for UX consistency and proper component functionality. Other Input components (like the NumericTextBox or TextArea), have a default `width` of `100%`, thus their sizing is left for the developer to handle per case.

The following list outlines the default widths of the Inputs:

* Inputs with specific default width—`Checkbox`, `ColorGradient`, `ColorPalette`, `ColorPicker`, `FlatColorPicker`, `RangeSlider`, `Slider`, `Switch`.
* Inputs with a default width of `100%`—`MaskedTextBox`, `NumericTextBox`, `TextArea`, `TextBox`.

All Inputs allow you to customize their width via CSS. To achieve this, utilize the [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) CSS property.

The following example demonstrates how to specify the width of the Inputs.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/inputs/styling/source.txt)

## Suggested Links

* [API Reference of the Inputs](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api)