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
Prop | Type | Required | Default | Description |
---|---|---|---|---|
modelValue | string | number | boolean | Yes | - | The current selected value |
options | Array<{ label: string, value: string | number | boolean }> | No | undefined | List of selectable radio options |
label | string | No | '' | Label text for the radio button |
value | string | number | boolean | No | undefined | The value of the radio button when used outside options |
disabled | boolean | No | false | Disables interaction with the component |
flavor | normal | outlined | box | No | normal | Styling variant for the radio button |
name | string | No | radio-group | Name attribute for the input group |
Variant | Classes | Description |
---|---|---|
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