BoxRadio Component

A styled radio button component designed to look like a selectable box. Useful for single-choice selections with a custom UI.

Usage

<template>
  <div>
    <box-radio
      name="gender"
      :data="'Male'"
      v-model="selectedGender"
    >
      Male
    </box-radio>

    <box-radio
      name="gender"
      :data="'Female'"
      v-model="selectedGender"
    >
      Female
    </box-radio>

    <p>Selected: {{ selectedGender }}</p>
  </div>
</template>

<script> 

export default { 
  data() {
    return {
      selectedGender: null
    };
  }
};
</script>

Props

Prop	Type	Default	Description
name	String	—	Input name attribute (groups radios together)
data	String / Number	—	The value assigned to this radio option
value	String / Number	—	The currently selected value (works with v-model)
disabled	Boolean	false	Disable the radio option

Features

• Works seamlessly with v-model for single selection.
• Styled like a select-box option with slot support for labels.
• Supports disabled state with visual feedback.
• Automatically syncs with parent value.