API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/RadioButton

RadioButton

Radio button with custom styling and optional ping effect

🔧 Props

Property	Type	Default	Description
name*	string	-	Radio group name (required for grouping)
value*	string	-	Radio button value
label	string	undefined	Display text
checked	State\|boolean\|Function	false	Checked state
ping	boolean	false	Animated ping effect on select
icon	Element	undefined	Custom icon element
containerClass	string	-	Container classes (vwfcolor, vwfsize)
onchange	function	undefined	Change event handler

🎨 Utility Classes

Pattern	Description
vwfcolor-{color}	Sets radio button color
vwfsize-{size}	Controls button size

💻 Examples

Radio Group

javascript•Radio Group

const selected = van.state('option1');
return div({class: 'space-y-4'},
  RadioButton({
    name: 'options',
    value: 'option1',
    label: 'Option 1',
    checked: () => selected.val === 'option1',
    onchange: (e) => selected.val = e.target.value
  }),
  RadioButton({
    name: 'options',
    value: 'option2',
    label: 'Option 2',
    checked: () => selected.val === 'option2',
    onchange: (e) => selected.val = e.target.value
  })
);

▶️ Live Preview

Option 1

Option 2

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

🔗 Related

Explore vwf

Discover what vwf can do