2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Forms / Forms Elements

Checkbox

Get started with the checkbox element that allows users to select one or more choices. This element is also a part of form-control.

The checkbox element is commonly used to receive one or more options from the user in the form of a square box.

Basic Checkbox

Use this basic example of a checkbox element in a checked and unchecked state.

Checkbox Sizes

There must be size options. Because size matters.

Click to show the entire code

Color Schemes

As usual, just use the scheme-{color} class to the check-control element.

Click to show the entire code

Helper Text

Show additional explanation such as hint, link, etc.

Vertical Options

You can align the checkboxes vertically by using a wrapper element and applying the flex flex-col classes.

Horizontal Options

You can align the checkboxes horizontally by using a wrapper element and applying the flex class.

Disabled State

Follow this examples to apply the disabled option.

Multiple Options Disabled

Valid States

Show feedback to users, usually right after performing validation.

Success Options
Error Options
Click to show the entire code