Logo

Basic radio

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 radios</label>
                        <div class="radio-list">
                            <label class="radio">
                                <input type="radio" name="radios1"/>
                                <span></span>
                                Default
                            </label>
                            <label class="radio radio-disabled">
                                <input type="radio" disabled="disabled" checked="checked" name="radios1"/>
                                <span></span>
                                Disabled
                            </label>
                            <label class="radio">
                                <input type="radio" checked="checked" name="radios1"/>
                                <span></span>
                                Checked
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Inline radios</label>
                        <div class="radio-inline">
                            <label class="radio">
                                <input type="radio" name="radios2"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="radio">
                                <input type="radio" name="radios2"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="radio">
                                <input type="radio" name="radios2"/>
                                <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 radios</label>
                        <div class="radio-inline">
                            <label class="radio">
                                <input type="radio" checked="checked" name="radios3"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="radio">
                                <input type="radio" name="radios3"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="radio">
                                <input type="radio" checked="checked" name="radios3"/>
                                <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="radio-inline">
                            <label class="radio radio-lg">
                                <input type="radio" checked="checked" name="radios3_1"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="radio radio-lg">
                                <input type="radio" name="radios3_1"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="radio radio-lg">
                                <input type="radio" name="radios3_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="radio-inline">
                            <label class="radio radio-square">
                                <input type="radio" checked="checked" name="radios13_1"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="radio radio-square">
                                <input type="radio" name="radios13_1"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="radio radio-square">
                                <input type="radio" name="radios13_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="radio-inline">
                            <label class="radio radio-rounded">
                                <input type="radio" checked="checked" name="radios15_1"/>
                                <span></span>
                                Option 1
                            </label>
                            <label class="radio radio-rounded">
                                <input type="radio" name="radios15_1"/>
                                <span></span>
                                Option 2
                            </label>
                            <label class="radio radio-rounded">
                                <input type="radio" name="radios15_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">Radios</label>
                            <div class="col-9 col-form-label">
                                <div class="radio-list">
                                    <label class="radio">
                                        <input type="radio"  name="radios4"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio">
                                        <input type="radio" checked="checked" name="radios4"/>
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-disabled">
                                        <input type="radio" disabled="disabled" name="radios4"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Inline radios</label>
                            <div class="col-9 col-form-label">
                                <div class="radio-inline">
                                    <label class="radio">
                                        <input type="radio" name="radios5"/>
                                        <span></span>
                                        Option 1
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="radios5"/>
                                        <span></span>
                                        Option 2
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="radios5"/>
                                        <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 radios</label>
                            <div class="col-9 col-form-label">
                                <div class="radio-inline">
                                    <label class="radio">
                                        <input type="radio" name="radios6"/>
                                        <span></span>
                                        Option 1
                                    </label>
                                    <label class="radio">
                                        <input type="radio" checked="checked" name="radios6"/>
                                        <span></span>
                                        Option 2
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="radios6"/>
                                        <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="radio-inline">
                                    <label class="radio radio-success">
                                        <input type="radio" name="radios5"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-success">
                                        <input type="radio" name="radios5" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-success radio-disabled">
                                        <input type="radio" name="radios5" 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="radio-inline">
                                    <label class="radio radio-primary">
                                        <input type="radio" name="radios11"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-primary">
                                        <input type="radio" name="radios11" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-primary radio-disabled">
                                        <input type="radio" name="radios11" 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="radio-inline">
                                    <label class="radio radio-danger">
                                        <input type="radio" name="radios12"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-danger">
                                        <input type="radio" name="radios12" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-danger radio-disabled">
                                        <input type="radio" name="radios12" 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="radio-inline">
                                    <label class="radio radio-outline radio-success">
                                        <input type="radio" name="radios15"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-outline radio-success">
                                        <input type="radio" name="radios15" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-outline radio-success radio-disabled">
                                        <input type="radio" name="radios15" 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="radio-inline">
                                    <label class="radio radio-outline radio-outline-2x radio-primary">
                                        <input type="radio" name="radios16"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-outline radio-outline-2x radio-primary">
                                        <input type="radio" name="radios16" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-outline radio-outline-2x radio-primary radio-disabled">
                                        <input type="radio" name="radios16" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                    </form>
                    

Accent Type

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</label>
                            <div class="col-9 col-form-label">
                                <div class="radio-inline">
                                    <label class="radio radio-accent radio-success">
                                        <input type="radio" name="radios18"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-accent radio-success">
                                        <input type="radio" name="radios18" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-accent radio-success radio-disabled">
                                        <input type="radio" name="radios18" 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</label>
                            <div class="col-9 col-form-label">
                                <div class="radio-inline">
                                    <label class="radio radio-accent radio-danger">
                                        <input type="radio" name="radios19"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-accent radio-danger">
                                        <input type="radio" name="radios19" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-accent radio-danger radio-disabled">
                                        <input type="radio" name="radios19" 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</label>
                            <div class="col-9 col-form-label">
                                <div class="radio-inline">
                                    <label class="radio radio-accent radio-primary">
                                        <input type="radio" name="radios20"/>
                                        <span></span>
                                        Default
                                    </label>
                                    <label class="radio radio-accent radio-primary">
                                        <input type="radio" name="radios20" checked="checked" />
                                        <span></span>
                                        Checked
                                    </label>
                                    <label class="radio radio-accent radio-primary radio-disabled">
                                        <input type="radio" name="radios20" disabled="disabled"/>
                                        <span></span>
                                        Disabled
                                    </label>
                                </div>
                                <span class="form-text text-muted">Some help text goes here</span>
                            </div>
                        </div>
                    </form>
                    

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