Ui.Checkbox

Checkboxes can be used to turn an option on or off.

Interactive Demo

You can play around with a Ui.Checkbox below using the controls.

Size (16px)
Checked
Disabled
<Ui.Checkbox
size={Ui.Size.Px(16)}
disabled={false}
checked={false}/>
State

The state of the component can be set with the checked property.

<>
<Ui.Checkbox checked={false}/>
<Ui.Checkbox checked={true}/>
</>
Size

The size of the component can be set with the size property.

<>
<Ui.Checkbox size={Ui.Size.Px(12)}/>
<Ui.Checkbox size={Ui.Size.Px(16)}/>
<Ui.Checkbox size={Ui.Size.Px(20)}/>
</>
Disabled

The component can be disabled using the disabled property.

<>
<Ui.Checkbox disabled={false}/>
<Ui.Checkbox disabled={true}/>
</>
Change Event

The component triggers the onChange event when clicked.

<Ui.Checkbox
onChange={(value : Bool) { Ui.Notifications.notifyDefault(<>"Changed!"</>) }}
/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.