Appearance

Premium

Updated on Oct 10, 2025

The timepicker provides a predefined set of appearance options.

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

• Size
• Fill Mode
• Rounded

Size

You can set the size of the TimePicker through the size property. The TimePicker component comes in three different sizes: small, medium (default), and large.

Change Theme

Theme

Loading ...

Fill Mode

You can set the fill mode of the TimePicker through the fillMode property. The TimePicker provides three different fill mode options: solid (default), outline, and flat.

Change Theme

Theme

Loading ...

Rounded

You can set the roundness of the TimePicker through the rounded property. The TimePicker component supports four different degrees of roundness: small, medium (default), large, and full.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the TimePicker
• TimePicker size options
• TimePicker fillMode options
• TimePicker rounded options
• Creating Custom Styles with ThemeBuilder
• React Date Inputs