Custom Options

Custom options are visually easy to understand. Materialize 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();

Radio

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>

Basic Label

Use class .custom-option-basic with .custom-option & .custom-option-label and create a custom option radio with background label. 

<div class="row w-75">
  <div class="col-md mb-md-0 mb-2">
    <div class="form-check custom-option custom-option-label custom-option-basic">
      <label class="form-check-label custom-option-content" for="customRadioTemp3">
        <input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp3" 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-label custom-option-basic">
      <label class="form-check-label custom-option-content" for="customRadioTemp5">
        <input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp5" />
        <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="ri-rocket-line"></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="ri-user-3-line"></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="ri-vip-crown-line"></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/15.jpg" alt="radioImg" />
        </span>
      </label>
      <input name="customRadioImage" class="form-check-input" type="radio" value="customRadioImg3" id="customRadioImg3" />
    </div>
  </div>
</div>

Checkboxes

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>

Basic Label

Structure to create a basic custom option label checkbox is same as basic custom option label 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-label custom-option-basic">
      <label class="form-check-label custom-option-content" for="customCheckTemp5">
        <input class="form-check-input" type="checkbox" value="" id="customCheckTemp5" 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 purchases!</small>
        </span>
      </label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-check custom-option custom-option-label custom-option-basic">
      <label class="form-check-label custom-option-content" for="customCheckTemp6">
        <input class="form-check-input" type="checkbox" value="" id="customCheckTemp6" />
        <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="ri-server-line"></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="ri-shield-line"></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="ri-lock-2-line"></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/8.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/15.jpg" alt="cbImg" />
        </span>
      </label>
    </div>
  </div>
</div>

Variants

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>

Variables

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
© 2017- Pixinvent, Hand-crafted & Made with ❤️