Radio

A real <input type="radio"> with the native dot painted over. Give every radio in a group the same name and the browser handles selection, arrow-key navigation, and form submission.

Deploy on push tomain onlyEvery branchNever (paused)

Props

Prop	Values	Default	Description
`size`	`"sm"`, `"md"`, `"lg"`	`"md"`	Circle and dot size.
`className`	string	`""`	Appended to the `<input>`, not the wrapper.

All other <input> attributes are forwarded.

Common patterns

<fieldset>
  <legend>Deploy on push to</legend>
  <label><Radio name="branch" value="main" defaultChecked /> main only</label>
  <label><Radio name="branch" value="all" /> Every branch</label>
</fieldset>

Notes

There is no RadioGroup component. The grouping is the shared name attribute — that is what makes arrow keys move between options and only one stay selected. A wrapper component would add a layer without adding behaviour.

Wrap the set in a <fieldset> with a <legend> so the group has a name. This matters more than it looks: without it, a screen reader reads each option without ever saying what is being chosen.