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:
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 thewidthandheightof the component to12px.medium(Default) — Sets thewidthandheightof the component to16px.large— Sets thewidthandheightof the component to24px.null— Passingnullto thesizeproperty gives us the option to define acustom CSS classthat sets thewidthandheightof 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 theborder radiusto1px.medium(Default) — Sets theborder radiusto2px.
large— Sets theborder radiusto4px.
null— Passingnullto theroundedproperty gives us the option to define acustom CSS classthat defines theborder-radiusof the CheckBox.
The following example demonstrates the usage of each rounded option: