Radio Button

Use RadioButton to let shoppers select one option from a set of mutually exclusive choices. It renders a labeled radio input with optional secondary description text and an optional leading icon.

Import

import { RadioButton } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
label	string | VNode	Yes	Label shown beside the radio button.
name	string	Yes	Field name, used for mapping the value in a form.
value	string	Yes	Field value.
size	'medium' | 'large'	No	Size of the label and description text. Defaults to medium.
checked	boolean	No	Whether the radio button is checked. Defaults to false.
disabled	boolean	No	Whether the radio button is disabled. Defaults to false.
error	boolean	No	Whether the radio button is in an error state. Defaults to false.
description	string	No	Additional secondary description text.
busy	boolean	No	Whether the radio button is busy. Defaults to false.
icon	VNode	No	Optional icon to display before the label (SVG or img element).

RadioButton also accepts standard HTML attributes (for example, onChange, className), except size, label, and icon.

Example

import { RadioButton, provider } from '/@dropins/tools/components.js';

await provider.render(RadioButton, {
  name: 'shipping',
  label: 'Free Shipping',
  value: 'free-shipping',
  description: 'Delivery in 5-7 business days',
})(document.querySelector('.radio-button'));

Related

• Toggle Button — a selectable button built on RadioButton.
• Design tokens — the colors, spacing, and typography the radio button uses.