Customizing Input

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-input-default-widthNumber

100%

100%

Description
Default width of input components.
$kendo-input-border-widthNumber

$input-border-width

1px

Description
Border width of input components.
$kendo-input-border-radiusNull

null

null

Description
Border radius of input components.
$kendo-input-padding-xNumber

$input-padding-x

0.75rem

Description
Horizontal padding of input components.
$kendo-input-padding-yNumber

$input-padding-y

0.375rem

Description
Vertical padding of input components.
$kendo-input-font-familyList

$font-family

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Description
Font family of input components.
$kendo-input-font-sizeNumber

$font-size

1rem

Description
Font size of input components.
$kendo-input-line-heightNumber

$input-line-height

1.5

Description
Line height of input components.

In this article

Not finding the help you need?