Radio

Features:

• Color
• Size
• Label
• Value binding

Usage

<script setup>
import { Radio } from 'gurunkit';
</script>

<template>
  <Radio label="Radio" />
</template>

Radio

Without Label

label is optional.

<script setup>
import { Radio } from 'gurunkit';
</script>

<template>
  <Radio />
</template>

Color

Set radio color using color props. Supported values: primary, light, error, warning, success.

It's also supports dark mode, enable it by adding dark class to html tag.

<script setup>
import { Radio } from 'gurunkit';
</script>

<template>
  <Radio color="primary" label="Primary" />
  <Radio color="warning" label="Warning" />
  <Radio color="error" label="Error" />
  <Radio color="light" label="Light" />
  <Radio color="success" label="Success" />
</template>

Primary

Warning

Error

Light

Success

Size

Set radio size using size props. Supported values: sm, md, lg.

<script setup>
import { Radio } from 'gurunkit';
</script>

<template>
  <Radio size="sm" label="Small" />
  <Radio size="md" label="Medium" />
  <Radio size="lg" label="Large" />
</template>

Small

Medium

Large

V-Model

Bind a value using v-model.

Specify each radio value using input-value props.

<script setup>
import { Radio } from 'gurunkit';
import { ref } from 'vue';

const selected = ref('javascript');
</script>

<template>
  <Radio label="Javascript" input-value="javascript" v-model="selected" />
  <Radio label="PHP" input-value="php" v-model="selected" />
  <Radio label="CPP" input-value="cpp" v-model="selected" />
</template>

Javascript

PHP

CPP

Selected: javascript

HTML Attributes and Events

HTML attributes and events are automatically inherited.

<script setup>
import { Radio } from 'gurunkit';
import { ref } from 'vue';

const onCheck = () => alert('test');
</script>

<template>
  <Radio
    id="period_year"
    input-value="_year"
    name="period"
    label="Year"
    @change="onCheck"
  />
  <Radio
    id="period_month"
    input-value="month"
    name="period"
    label="Month"
    @change="onCheck"
  />
</template>

Year

Month

API

Props

Name	Type	Required	Default	Description
color	primary, light, success, warning, error	❌	primary	Radio color
inputValue	string	❌	null	Radio input value
label	string	❌	null	Radio label
size	sm, md, lg	❌	md	Radio size
All HTML attributes	-	❌	-	HTML attributes

Events

Name	Type	Description
All HTML events	-	HTML events

Model Value

Name	Type	Description
default	string	Bind a selected value