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 CSS property.

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

Suggested Links

• API Reference of the Inputs