Skip to content
Paramanu v0.1.0-alpha.0

Radio

The Radio component provides single-selection radio buttons, typically used within a RadioGroup.

Basic Usage

import { Radio, RadioGroup } from "@paramanu/forms-react"


export default function App() {
  return (
    <RadioGroup name="fruit">
      <Radio name="fruit" value="apple">Apple</Radio>
      <Radio name="fruit" value="banana">Banana</Radio>
    </RadioGroup>
  )
}
<div class="pm-radio-group pm-radio-group--vertical pm-radio-group--md" role="radiogroup">
  <label class="pm-radio pm-radio--md">
    <input type="radio" class="pm-radio__input" name="fruit" value="apple" />
    <span class="pm-radio__indicator"></span>
    <span class="pm-radio__label">Apple</span>
  </label>
  <label class="pm-radio pm-radio--md">
    <input type="radio" class="pm-radio__input" name="fruit" value="banana" />
    <span class="pm-radio__indicator"></span>
    <span class="pm-radio__label">Banana</span>
  </label>
</div>

Horizontal Group

import { Radio, RadioGroup } from "@paramanu/forms-react"


export default function App() {
  return (
    <RadioGroup name="color" orientation="horizontal">
      <Radio name="color" value="red">Red</Radio>
      <Radio name="color" value="blue">Blue</Radio>
    </RadioGroup>
  )
}
<div class="pm-radio-group pm-radio-group--horizontal pm-radio-group--md" role="radiogroup">
  <label class="pm-radio pm-radio--md"><input type="radio" class="pm-radio__input" name="color" value="red" /><span class="pm-radio__indicator"></span><span class="pm-radio__label">Red</span></label>
  <label class="pm-radio pm-radio--md"><input type="radio" class="pm-radio__input" name="color" value="blue" /><span class="pm-radio__indicator"></span><span class="pm-radio__label">Blue</span></label>
</div>