Radio Group generator
Single-choice settings — shipping speed, notification frequency, plan tier — map naturally to lightning-radio-group. Choose standard radio or button-group style depending on how much visual weight the choice deserves.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-radio-group
label="Shipping speed"
options={options}
value={value}
type="radio"
class="studio-radio-group"
onchange={handleChange}
></lightning-radio-group>
</template>Design tips for radio groups
- Use the button-group variant when every option deserves equal visual weight, like a segmented filter.
- Use standard radios when options include longer descriptive labels that need to wrap onto their own line.
- Always pre-select a sensible default rather than leaving the group empty.
Related components
Components developers commonly compare against or pair with Radio Group.