Appearance

The MaskedTextBox provides a predefined set of appearance options.

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

• Size
• Fill Mode
• Border Radius

Size

The KendoReact MaskedTextBox enables you to configure its size.

• small
• medium (Default)
• large
• null - Does not set a size className

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

Change Theme

Theme

Loading ...

Fill Mode

The MaskedTextBox supports the following fillMode options:

• solid (Default)
• outline
• flat
• null - Does not set a className for fillMode

The following example demonstrates how to set the fillMode of the MaskedTextBox.

Change Theme

Theme

Loading ...

Border Radius

The MaskedTextBox enables you to apply different border radius to the component through the rounded property.

The rounded option supports the following values:

• small
• medium (Default)
• large
• null - Does not set a className for size

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

Change Theme

Theme

Loading ...

Adornments

You can also render custom React Components like the Icon and Button by configuring the prefix and suffix props of the MaskedTextBox component and then implement custom functionality on top of them.

For correct styling, wrap custom adornments in InputPrefix and InputSuffix containers.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the MaskedTextBox
• MaskedTextBox prefix options
• MaskedTextBox suffix options
• MaskedTextBox size options
• MaskedTextBox fillMode options
• MaskedTextBox rounded options
• Creating Custom Styles with ThemeBuilder