Skip to content

role group

Radio group draft v0.1.0

Lets people choose exactly one option from a short, visible set.

A radio group shows every option at once, with a legend naming the choice, and lets people check exactly one of them: checking an option unchecks the previous one. Use it when the options are few and worth reading side by side; a long list of options is a Select, and independent on/off options are Checkboxes. The group is one component: the options are its repeated part, each with its own label, description, value and disabled state.

Examples

Delivery method
  • 3 to 5 business days, free

  • 1 to 2 business days

  • Today, at the store

  • orientation="vertical"
  • size="medium"
  • label="Delivery method"
  • name="delivery"
  • options=[{"label":"Standard","value":"standard","description":"3 to 5 business days, free","checked":true},{"label":"Express","value":"express","description":"1 to 2 business days"},{"label":"Pickup","value":"pickup","description":"Today, at the store"}]
Open in playground