Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page

Was this helpful?

  1. Ionic Custom Components

Checkbox Wrapper

Checkbox Wrapper custom component.

PreviousIonic Custom ComponentsNextCountdown timer

Last updated 3 years ago

Was this helpful?

Ionic Custom Checkbox Component

This is a super straightforward component whose purpose is to wrap an <ion-checkbox> element to enable accessing the checkbox state from its parents.

<app-checkbox-wrapper class="custom-checkbox">
  <ion-checkbox checked=true></ion-checkbox>
  <ion-label>Sample Checkbox</ion-label>
</app-checkbox-wrapper>
app-checkbox-wrapper.custom-checkbox {
  background: #CCC;
  color: #000;

  &.checkbox-checked {
    background: #00AFFF;
    color: #FFF;
  }
}

See the to learn how to use and customize this component.

live Showcase