Basic Radio Buttons

Custom Radio Buttons

Add .custom-control .custom-radio as a single wrapper & add .custom-control-label for better output.

Vuexy Radio Buttons

To add a checkBox, we have the .vs-radio-con as a wrapper. Also use .vs-radio for better output.

  • Active
  • Inactive
  • Active - disabled
  • Inactive - disabled


To change the color of the radio use the .vs-radio-{value} for primary, success, danger, info, warning.

  • Primary (Default)
  • Success
  • Danger
  • Info
  • Warning

Vuexy Radio Buttons Sizes

To add a radio button with different sizes, we have the .vs-radio-sm and .vs-radio-lg for small and large Radio Buttons respectively. Add it alongwith .vs-radio class.

  • Small
  • Default
  • Large