PURadio Component

A customizable radio button component with multiple variants, disabled states, and grouped options.

Usage

Basic Usage

Option 1
Option 1
Option 2
Option 3

All Variants

Normal
Outlined
Box
Disabled
PropTypeRequiredDefaultDescription
modelValuestring | number | booleanYes-The current selected value
optionsArray<{ label: string, value: string | number | boolean }>NoundefinedList of selectable radio options
labelstringNo''Label text for the radio button
valuestring | number | booleanNoundefinedThe value of the radio button when used outside options
disabledbooleanNofalseDisables interaction with the component
flavornormal | outlined | boxNonormalStyling variant for the radio button
namestringNoradio-groupName attribute for the input group
VariantClassesDescription
normal`pu-radio--normal`Standard circular radio button (Default)
outlined`pu-radio--outlined`Outlined style with a border and active state highlight
box`pu-radio--box`Box-style radio with bold selection
  • Uses font-patrick font family class
  • Utility-first CSS applied for flexible styling:
    .pu-radio {
      @apply flex items-center gap-2 group transition-all;
    }
    .pu-radio:not(:disabled):hover {
      @apply opacity-80;
    

    }

  • Hover effects apply when not disabled
  • Borders and backgrounds adjust dynamically based on the selected state
  • Fully customizable through CSS classes
  • Built with Tailwind CSS utility classes
  • Fully compatible with Vue's v-model