InputKit: CheckBox

A checkbox control that is useful, customizable, full-featured, fully-bindable and easy to use.

Dark - Desktop	Light - Mobile

You can visit entire code of this sample from here

Supported Platforms

Usage

Before starting to use. Make sure you're not using MAUI/Xamarin Forms checkbox in your pages.

Make sure you defined InputKit namespace in your XAML file.

Now you're ready to use it in your XAML page.

<input:CheckBox Text="Hello World">

Data Binding

All of the properties of the CheckBox control can be bound to any property of any object that supports data binding.

• You can bind the IsChecked property to any property of ViewModel to handle the checkbox state.

<input:CheckBox Text="Hello World" IsChecked="{Binding IsChecked}">

• You can bind the CheckChangedCommand property to any command of ViewModel to handle the checkbox changes. This command is executed right after the checkbox is checked or unchecked.

<input:CheckBox Text="Hello World" CheckChangedCommand="{Binding OnCheckChangedCommand}">

If you're looking for dynamic CheckBox list and want to get only selected item/items after selection. Check the SelectionView

• Rest of the visual properties are bindable as well.

Customization

CheckBox allows you to customize its appearance in different ways.

Type

CheckBox supports three types of appearance: - Regular - default type, looks like a checkbox. - Filled - looks like filled when selected with Border Color of the control. - Material - looks like filled when selected with Color property color.

Regular Type

This is default value. If you don't specify any type, it will be regular type.

<input:CheckBox Text="Hello World!" />
<!-- Or you can specify the Type like below -->
<input:CheckBox Text="Hello World!" Type="Regular" />

Filled Type

This type is used when you want to fill the control with Border Color of the control when it's selected.

<input:CheckBox Text="Hello World!" Type="Filled" />

Material Type

This type is used when you want to fill the control with Color property color when it's selected.

<input:CheckBox Text="Hello World!" Type="Material" />

Icons

CheckBox icon can be customized in two different ways. You can use predefined shapes or you can use custom shape. InputKit provides a collection of predefined shapes that can be used as an icon.

Check all Predefined Shapes for more info.

• Predefined shapes can be used as parameter of IconGeometry property.

<input:CheckBox Text="Option 2 with Square Shape" IconGeometry="{x:Static input:PredefinedShapes.Square}" />

• Custom shape can be used as parameter of IconGeometry property. A plain SVG path can be used as an icon.

<input:CheckBox 
    Text="Option 5 with Material Custom Type (X)" 
    Type="Material" 
    IconGeometry="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"/>

Label Position

CheckBox supports two label positions: - Before - label is positioned before the control. - After - label is positioned after the control. (default)

<input:CheckBox Text="Hello World! After" LabelPosition="After" />
<input:CheckBox Text="Hello World! Before" LabelPosition="Before" />

Colors

You can customize CheckBox colors by setting Color, BackgroundColor, BorderColor, BoxBackgroundColor, TextColor and IconColor properties.

    <input:CheckBox 
        Text="Hello World!"
        Color="Blue"
        BorderColor="LightBlue"
        IconColor="DarkBlue"
        BoxBackgroundColor="LightGray"
        TextColor="Blue"
        BackgroundColor="AliceBlue"
        />

Color property will be applied when you set Type to Material.

<input:CheckBox 
    Text="Hello World!"
    Type="Material"
    Color="Blue"
    BorderColor="LightBlue"
    IconColor="DarkBlue"
    BoxBackgroundColor="LightGray"
    TextColor="Blue"
    BackgroundColor="AliceBlue"
    />

Behaviors

** Work in progess... **:

• Actions to override
• VisualStates
• Make your own animation (?)