Radio Button

Used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

Best practices

The options must be grouped together with a label.
An option must be selected by default. Except when a default option can cause harm to the user or implies a critical/important action of the system: in these cases, you can present the list without any default option and add an option to clear the selection.
Order the list in a logical order, for example: most likely to be selected first/ least likely last; simplest option to the most complex, etc.
For a list with more than 4 options consider using Select.

Examples

WhiskeyCoconut waterWhatever

import { HFlow, Radio } from '@lemonade/ui'
import React from 'react'

function RadioExample() {
  return (
    <HFlow>
      <Radio name='default' label='Whiskey' value='whiskey' />
      <Radio name='default' label='Coconut water' value='coconut water' />
      <Radio name='disabled' label='Whatever' value='whatever' disabled />
    </HFlow>
  )
}

export default RadioExample