Custom options are visually easy to understand. Sneat provides custom options component which are the basically the extended version of checkbox and radio.
This custom components use the .custom-option-content
, .custom-option-header
and .custom-option-body
classes to apply styles.
It has three different variants as below
Option | Class |
---|---|
Custom option basic | class="custom-option custom-option-basic" |
Custom option icon/svg | class="custom-option custom-option-icon" |
Custom option image | class="custom-option custom-option-image" |
Custom options use initCustomOptionCheck()
helper function to manage checked options. It's mandatory to initialize it first.
window.Helpers.initCustomOptionCheck();
.row
as initCustomOptionCheck()
usage the closest element to apply checked class.
Basic
Use class .custom-option-basic
with .custom-option
and add an icon inside body to create a custom option radio with icon.
<div class="row w-75">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioTemp1">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp1" checked />
<span class="custom-option-header">
<span class="h6 mb-0">Basic</span>
<span>Free</span>
</span>
<span class="custom-option-body">
<small>Get 1 project with 1 teams members.</small>
</span>
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioTemp2">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp2" />
<span class="custom-option-header">
<span class="h6 mb-0">Premium</span>
<span>$ 5.00</span>
</span>
<span class="custom-option-body">
<small>Get 5 projects with 5 team members.</small>
</span>
</label>
</div>
</div>
</div>
Icons
Use class .custom-option-icon
with .custom-option
and add an icon inside body to create a custom option radio with icon.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioIcon1">
<span class="custom-option-body">
<i class="bx bx-rocket"></i>
<span class="custom-option-title">Starter</span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioIcon1" checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioIcon2">
<span class="custom-option-body">
<i class="bx bx-user"></i>
<span class="custom-option-title"> Personal </span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o. </small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioIcon2" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioIcon3">
<span class="custom-option-body">
<i class="bx bx-crown"></i>
<span class="custom-option-title"> Enterprise </span>
<small>Cake sugar plum fruitcake I love sweet roll jelly-o.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioIcon3" />
</label>
</div>
</div>
</div>
SVG Icons
Creating Custom Options with SVG is same as creating custom options with icons all you have to do is place SVG instead of an icon.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioSvg1">
<span class="custom-option-body">
<svg></svg>
<span class="custom-option-title"> Design </span>
<small>Cake sugar plum fruitcake I love sweet roll jelly-o.</small>
</span>
<input name="customRadioSvg" class="form-check-input" type="radio" value="" id="customRadioSvg1" checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioSvg2">
<span class="custom-option-body">
<svg></svg>
<span class="custom-option-title"> Development </span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o. </small>
</span>
<input name="customRadioSvg" class="form-check-input" type="radio" value="" id="customRadioSvg2" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioSvg3">
<span class="custom-option-body">
<svg></svg>
<span class="custom-option-title"> Native App </span>
<small>Cake sugar plum fruitcake I love sweet roll jelly-o.</small>
</span>
<input name="customRadioSvg" class="form-check-input" type="radio" value="" id="customRadioSvg3" />
</label>
</div>
</div>
</div>
Images
Use class .custom-option-image
, .custom-option-image-radio
with .custom-option
and an image in custom radio options body to create a radio with image.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-image custom-option-image-radio">
<label class="form-check-label custom-option-content" for="customRadioImg1">
<span class="custom-option-body">
<img src="assets/img/backgrounds/3.jpg" alt="radioImg" />
</span>
</label>
<input name="customRadioImage" class="form-check-input" type="radio" value="customRadioImg1" id="customRadioImg1" checked />
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-image custom-option-image-radio">
<label class="form-check-label custom-option-content" for="customRadioImg2">
<span class="custom-option-body">
<img src="assets/img/backgrounds/8.jpg" alt="radioImg" />
</span>
</label>
<input name="customRadioImage" class="form-check-input" type="radio" value="customRadioImg2" id="customRadioImg2" />
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-image custom-option-image-radio">
<label class="form-check-label custom-option-content" for="customRadioImg3">
<span class="custom-option-body">
<img src="assets/img/backgrounds/5.jpg" alt="radioImg" />
</span>
</label>
<input name="customRadioImage" class="form-check-input" type="radio" value="customRadioImg3" id="customRadioImg3" />
</div>
</div>
</div>
Basic
Structure to create a basic custom option checkbox is same as basic custom option radio the only change is that you have to make it a custom checkbox instead of custom radio.
Refer below mentioned example for more info.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customCheckTemp3">
<input class="form-check-input" type="checkbox" value="" id="customCheckTemp3" checked />
<span class="custom-option-header">
<span class="h6 mb-0">Discount</span>
<span>20%</span>
</span>
<span class="custom-option-body">
<small class="option-text"> Get 20% off on your next purchase. </small>
</span>
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customCheckTemp4">
<input class="form-check-input" type="checkbox" value="" id="customCheckTemp4" />
<span class="custom-option-header">
<span class="h6 mb-0">Updates</span>
<span>Free</span>
</span>
<span class="custom-option-body">
<small> Get Updates regarding related products. </small>
</span>
</label>
</div>
</div>
</div>
Icons
Use class .custom-option-icon
with .custom-option
and add an icon inside body to create a custom option checkbox with icon.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customCheckboxIcon1">
<span class="custom-option-body">
<i class="bx bx-server"></i>
<span class="custom-option-title"> Backup </span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o. </small>
</span>
<input class="form-check-input" type="checkbox" value="" id="customCheckboxIcon1" checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customCheckboxIcon2">
<span class="custom-option-body">
<i class="bx bx-shield"></i>
<span class="custom-option-title"> Encrypt </span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o. </small>
</span>
<input class="form-check-input" type="checkbox" value="" id="customCheckboxIcon2" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customCheckboxIcon3">
<span class="custom-option-body">
<i class="bx bx-lock"></i>
<span class="custom-option-title"> Site Lock </span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o. </small>
</span>
<input class="form-check-input" type="checkbox" value="" id="customCheckboxIcon3" />
</label>
</div>
</div>
</div>
SVG Icons
Creating Custom Options with SVG is same as creating custom options with icons all you have to do is place SVG
instead of an icon.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customCheckboxSvg1">
<span class="custom-option-body">
<svg></svg>
<span class="custom-option-title"> Design </span>
<small>Cake sugar plum fruitcake I love sweet roll jelly-o.</small>
</span>
<input class="form-check-input" type="checkbox" value="" id="customCheckboxSvg1" checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customCheckboxSvg2">
<span class="custom-option-body">
<svg></svg>
<span class="custom-option-title"> Development </span>
<small>Cake sugar plum fruitcake I love sweet roll jelly-o.</small>
</span>
<input class="form-check-input" type="checkbox" value="" id="customCheckboxSvg2" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customCheckboxSvg3">
<span class="custom-option-body">
<svg></svg>
<span class="custom-option-title"> Native App </span>
<small> Cake sugar plum fruitcake I love sweet roll jelly-o. </small>
</span>
<input class="form-check-input" type="checkbox" value="" id="customCheckboxSvg3" />
</label>
</div>
</div>
</div>
Images
Use class .custom-option-image
, .custom-option-image-check
with .custom-option
and an image in custom checkbox options body to create a checkbox with image.
<div class="row">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-image custom-option-image-check">
<input class="form-check-input" type="checkbox" value="" id="customCheckboxImg1" checked />
<label class="form-check-label custom-option-content" for="customCheckboxImg1">
<span class="custom-option-body">
<img src="assets/img/backgrounds/3.jpg" alt="cbImg" />
</span>
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-image custom-option-image-check">
<input class="form-check-input " type="checkbox" value="" id="customCheckboxImg2" />
<label class="form-check-label custom-option-content" for="customCheckboxImg2">
<span class="custom-option-body">
<img src="assets/img/backgrounds/5.jpg" alt="cbImg" />
</span>
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-image custom-option-image-check">
<input class="form-check-input" type="checkbox" value="" id="customCheckboxImg3" />
<label class="form-check-label custom-option-content" for="customCheckboxImg3">
<span class="custom-option-body">
<img src="assets/img/backgrounds/8.jpg" alt="cbImg" />
</span>
</label>
</div>
</div>
</div>
Basic
Use contextual colors class .form-check-*
with .form-check
class to apply different color styles. Refer table below example for color options. Refer Checkboxes & Radios Colors.
<div class="row w-75">
<div class="col-md mb-md-0 mb-2">
<div class="form-check form-check-success custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioVTemp1">
<input name="customRadioVariants" class="form-check-input" type="radio" value="" id="customRadioVTemp1" checked />
<span class="custom-option-header">
<span class="h6 mb-0">Basic</span>
<span>Free</span>
</span>
<span class="custom-option-body">
<small>Get 1 project with 1 team member.</small>
</span>
</label>
</div>
</div>
<div class="col-md">
<div class="form-check form-check-success custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioVTemp2">
<input name="customRadioVariants" class="form-check-input" type="radio" value="" id="customRadioVTemp2" />
<span class="custom-option-header">
<span class="h6 mb-0">Premium</span>
<span>$ 5.00</span>
</span>
<span class="custom-option-body">
<small> Get 5 projects with 5 team members. </small>
</span>
</label>
</div>
</div>
</div>
Refer below mentioned for all the variables of custom-option.
Variable | Description |
---|---|
$custom-option-padding |
Variable for custom option padding |
$custom-option-cursor |
Variable for custom option cursor type |
$custom-option-border-color |
Variable for custom option border color |
$custom-option-border-width |
Variable for custom option border width |
$custom-option-image-border-width |
Variable for custom option with image border width |
$custom-option-border-hover-color |
Variable for custom option border color on hover |