Appearance

The CheckBox provides a predefined set of appearance options.

Apart from the default vision of the CheckBox, these alternative styling options enable you to configure each individual aspect of the component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

• CheckBox Configurator demo
• CheckBox Sizes
• CheckBox Roundness

Configurator demo

The following example demonstrates configuring different aspects of a CheckBox appearance through a configurator.

Size

The size of the CheckBox is controlled through its size property. The values we can pass to the property are as follows:

• small — Sets the width and height of the component to 12px.
• medium(Default) — Sets the width and height of the component to 16px.
• large — Sets the width and height of the component to 24px.
• null — Passing null to the size property gives us the option to define a custom CSS class that sets the width and height of the CheckBox.

The following example demonstrates the usage of each size option:

Roundness

The roundness of the CheckBox is controlled through its rounded property. The values we can pass to the property are as follows:

• small — Sets the border radius to 1px.
• medium(Default) — Sets the border radius to 2px.

• large — Sets the border radius to 4px.

• null — Passing null to the rounded property gives us the option to define a custom CSS class that defines the border-radius of the CheckBox.

The following example demonstrates the usage of each rounded option:

Suggested Links

• API Reference of the Checkbox
• Checkbox size options
• Checkbox rounded options
• Creating Custom Styles with ThemeBuilder