Forms - Custom Options | Vuexy - Bootstrap 5 Admin Template

Custom Options

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

Warning: Warp custom options with .row as initCustomOptionCheck() usage the closest element to apply checked class.

Radio

Basic

Use class .custom-option-basic with .custom-option and add an icon inside body to create a custom option radio with icon.

Preview
HTML

Basic Free Get 1 project with 1 teams members.

Premium $ 5.00 Get 5 projects with 5 team members.

<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="fw-medium">Basic</span>
        <span class="fw-medium text-muted">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 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="fw-medium">Premium</span>
        <span class="fw-medium text-muted">$ 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.

Preview
HTML

Starter Cake sugar plum fruitcake I love sweet roll jelly-o.

Personal Cake sugar plum fruitcake I love sweet roll jelly-o.

Enterprise Cake sugar plum fruitcake I love sweet roll jelly-o.

<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="ti ti-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="ti ti-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="ti ti-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.

Preview
HTML

Design Cake sugar plum fruitcake I love sweet roll jelly-o.

Development Cake sugar plum fruitcake I love sweet roll jelly-o.

Native App Cake sugar plum fruitcake I love sweet roll jelly-o.

<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>

Note: For svg icons, it is necessary to use currentColor value for fill attribute to match with design.

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.

Preview
HTML

<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/speaker.png" 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/airpods.png" 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/headphones.png" 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.

Preview
HTML

Discount 20% Get 20% off on your next purchase.

Updates Free Get Updates regarding related products.

<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="fw-medium">Discount</span>
          <span class="fw-medium text-muted">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="fw-medium">Updates</span>
          <span class="fw-medium text-muted">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.

Preview
HTML

Backup Cake sugar plum fruitcake I love sweet roll jelly-o.

Encrypt Cake sugar plum fruitcake I love sweet roll jelly-o.

Site Lock Cake sugar plum fruitcake I love sweet roll jelly-o.

<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="ti ti-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="ti ti-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="ti ti-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.

Preview
HTML

Design Cake sugar plum fruitcake I love sweet roll jelly-o.

Development Cake sugar plum fruitcake I love sweet roll jelly-o.

Native App Cake sugar plum fruitcake I love sweet roll jelly-o.

<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>

Note: For svg icons, it is necessary to use currentColor value for fill attribute to match with design.

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.

Preview
HTML

<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/watch.png" 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/phone.png" 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/mac.png" 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.

Preview
HTML

Basic Free Get 1 project with 1 team member.

Premium $ 5.00 Get 5 projects with 5 team members.

<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="fw-medium">Basic</span>
        <span class="fw-medium text-muted">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="fw-medium">Premium</span>
        <span class="fw-medium text-muted">$ 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