Form Checkbox Radios | Dleohr

Notifications

Daniel Martinz

Daniel Martinz equested Sick Leave from May 28 2025 to May 29 2025

4 min ago

Emily Clark

Leave for Emily Clark has been approved.

8 min ago

David

Leave request from David Andersonhas been rejected.

15 min ago

Ann McClure

cancelled her appointment scheduled for February 5, 2024

20 min ago

View All Notifications

Main Menu
- Dashboard
- Applications
  - Chat
  - Calls
  - Calendar
  - Contacts
  - Email
  - Invoices
    - Invoices
    - Invoice Details
  - To Do
  - Notes
  - Kanban Board
  - File Manager
  - Social Feed
  - Search Result
Peoples & Teams
- Companies
- Employee
- Leaves
- Reviews
Utilities & Reports
- Calendar
- Reports
- Manage
Settings
- Settings
Authentication
UI Interface
- Base UI
  - Accordion
  - Alerts
  - Avatar
  - Badges
  - Breadcrumb
  - Buttons
  - Button Group
  - Card
  - Carousel
  - Collapse
  - Dropdowns
  - Ratio
  - Grid
  - Images
  - Links
  - List Group
  - Modals
  - Offcanvas
  - Pagination
  - Placeholders
  - Popovers
  - Progress
  - Scrollspy
  - Spinner
  - Tabs
  - Toasts
  - Tooltips
  - Typography
  - Utilities
- Advanced UI
  - Dragula
  - Clipboard
  - Sweet Alerts
  - Lightbox
  - Scrollbar
- Forms
- Tables
  - Basic Tables
  - Data Table
- Charts
- Icons
Help

Joseph Smith

admin@example.com

Logout

Checks & Radios

Home
Forms
Checks & Radios

Checkboxes

Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.

Check this custom checkbox

Check this custom checkbox

Inline

Check this custom checkbox

Check this custom checkbox

Disabled

Check this custom checkbox

Check this custom checkbox

Colors

Default Checkbox

Success Checkbox

Info Checkbox

Secondary Checkbox

Warning Checkbox

Danger Checkbox

Dark Checkbox

Without Labels

Checkbox toggle buttons

Single toggle Checked Disabled

Single toggle Checked Disabled

Radios

Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.

Toggle this custom radio

Or toggle this other custom radio

Inline

Toggle this custom radio

Or toggle this other custom radio

Disabled

Toggle this custom radio

Or toggle this other custom radio

Colors

Default Radio

Success Radio

Info Radio

Secondary Radio

Warning Radio

Danger Radio

Dark Radio

Without Labels

Radio toggle buttons

Checked Radio Disabled Radio

Checked Radio Disabled Radio

Reverse

Reverse checkbox

Disabled reverse checkbox

Reverse switch checkbox input

Switches

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

© Dleo HR, All Rights Reserved

Design & Developed by Dreams Technologies