Logo

Basic checkbox

Some help text goes here
Some help text goes here
Some help text goes here
Some help text goes here
Some help text goes here

                    <div class="form-group">
                        <label>Default Checkboxes</label>
                        <div class="checkbox-list">
                            <label class="checkbox">
                                <input type="checkbox" name="Checkboxes1"/>
                                <span></span>
                                Default
                            </label>
                            <label class="checkbox checkbox-disabled">
                                <input type="checkbox" disabled="disabled" checked="checked" name="Checkboxes1"/>
                                <span></span>
                                Disabled
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" checked="checked" name="Checkboxes1"/>
                                <span></span>
                                Checked
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Inline Checkboxes</label>
                        <div class="checkbox-inline">
                            <label class="checkbox">
                                <input type="checkbox" name="Checkboxes2"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="Checkboxes2"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="Checkboxes2"/>
                                <span></span>
                                Option 3
                            </label>
                        </div>
                        <span class="form-text text-muted">Some help text goes here</span>
                    </div>
                    <div class="form-group">
                        <label>Inline Checkboxes</label>
                        <div class="checkbox-inline">
                            <label class="checkbox">
                                <input type="checkbox" checked="checked" name="Checkboxes3"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="Checkboxes3"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" checked="checked" name="Checkboxes3"/>
                                <span></span>
                                Option 3
                            </label>
                        </div>
                        <span class="form-text text-muted">Some help text goes here</span>
                    </div>
                    <div class="form-group">
                        <label>Large Size</label>
                        <div class="checkbox-inline">
                            <label class="checkbox checkbox-lg">
                                <input type="checkbox" checked="checked" name="Checkboxes3_1"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="checkbox checkbox-lg">
                                <input type="checkbox" name="Checkboxes3_1"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="checkbox checkbox-lg">
                                <input type="checkbox" name="Checkboxes3_1"/>
                                <span></span>
                                Option 3
                            </label>
                        </div>
                        <span class="form-text text-muted">Some help text goes here</span>
                    </div>
                    <div class="form-group">
                        <label>Square Style</label>
                        <div class="checkbox-inline">
                            <label class="checkbox checkbox-square">
                                <input type="checkbox" checked="checked" name="Checkboxes13_1"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="checkbox checkbox-square">
                                <input type="checkbox" name="Checkboxes13_1"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="checkbox checkbox-square">
                                <input type="checkbox" name="Checkboxes13_1"/>
                                <span></span>
                                Option 3
                            </label>
                        </div>
                        <span class="form-text text-muted">Some help text goes here</span>
                    </div>
                    <div class="form-group">
                        <label>Rounded Style</label>
                        <div class="checkbox-inline">
                            <label class="checkbox checkbox-rounded">
                                <input type="checkbox" checked="checked" name="Checkboxes15_1"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="checkbox checkbox-rounded">
                                <input type="checkbox" name="Checkboxes15_1"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="checkbox checkbox-rounded">
                                <input type="checkbox" name="Checkboxes15_1"/>
                                <span></span>
                                Option 3
                            </label>
                        </div>
                        <span class="form-text text-muted">Some help text goes here</span>
                    </div>
                    

Horizontal Form

Some help text goes here
Some help text goes here

                    <form class="form">
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Checkboxes</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-list">
                                    <label class="checkbox">
                                        <input type="checkbox"  name="Checkboxes4"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" checked="checked" name="Checkboxes4"/>
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="checkbox checkbox-disabled">
                                        <input type="checkbox" disabled="disabled" name="Checkboxes4"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Inline Checkboxes</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox">
                                        <input type="checkbox" name="Checkboxes5"/>
                                        <span></span>
                                        Option 1
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" name="Checkboxes5"/>
                                        <span></span>
                                        Option 2
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" name="Checkboxes5"/>
                                        <span></span>
                                        Option 3
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Inline Checkboxes</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox">
                                        <input type="checkbox" name="Checkboxes6"/>
                                        <span></span>
                                        Option 1
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" checked="checked" name="Checkboxes6"/>
                                        <span></span>
                                        Option 2
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" name="Checkboxes6"/>
                                        <span></span>
                                        Option 3
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                    </form>
                    

Theme Colors

Some help text goes here
Some help text goes here
Some help text goes here

                    <form class="form">
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Success State</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" name="Checkboxes5"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" name="Checkboxes5" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="checkbox checkbox-success checkbox-disabled">
                                        <input type="checkbox" name="Checkboxes5" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Primary State</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox checkbox-primary">
                                        <input type="checkbox" name="Checkboxes11"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="checkbox checkbox-primary">
                                        <input type="checkbox" name="Checkboxes11" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="checkbox checkbox-primary checkbox-disabled">
                                        <input type="checkbox" name="Checkboxes11" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Danger State</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox checkbox-danger">
                                        <input type="checkbox" name="Checkboxes12"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="checkbox checkbox-danger">
                                        <input type="checkbox" name="Checkboxes12" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="checkbox checkbox-danger checkbox-disabled">
                                        <input type="checkbox" name="Checkboxes12" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                    </form>
                    

Outline Type

Some help text goes here
Some help text goes here

                    <form class="form">
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Outline Default</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox checkbox-outline checkbox-success">
                                        <input type="checkbox" name="Checkboxes15"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="checkbox checkbox-outline checkbox-success">
                                        <input type="checkbox" name="Checkboxes15" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="checkbox checkbox-outline checkbox-success checkbox-disabled">
                                        <input type="checkbox" name="Checkboxes15" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Outline 2x</label>
                            <div class="col-9 col-form-label">
                                <div class="checkbox-inline">
                                    <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
                                        <input type="checkbox" name="Checkboxes16"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
                                        <input type="checkbox" name="Checkboxes16" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary checkbox-disabled">
                                        <input type="checkbox" name="Checkboxes16" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                    </form>
                    

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9